Box
For instructions on adding elements like the example below, see the Add Design Elements post in Slab.
Using the box element is a good way to group related text or add interest to your page. Fill in the Box Options below and the code will be generated for you in the Code box. Before adding to your page, be sure to follow the Usage Requirements.
Usage Requirements
- Cannot use more than 3 boxes side-by-side
- You can however add additional rows (see below)
- You must wrap the entire generated code with the following div class:
- <div class="desktop-flex box-row">
GENERATED CODE GOES HERE
</div>
- If you have multiple rows of boxes, each will need to be wrapped in the above code. For example:
- <div class="desktop-flex box-row">
FIRST ROW OF BOXES
</div> <div class="desktop-flex box-row">
SECOND ROW OF BOXES
</div>
- Boxes cannot be used in a sidebar (nav-sidebar and sidebar templates)
Element Requirements
- No all caps on heading or text
- Approved font/weight only (no bold)
- No more than 4 lines of content
- Button or linked text (25 or fewer characters)
- Only one button per box element
- When used in set, icons and accent lines must be the same color.
- NO custom background colors. White or gray are the options.
- Use of any special campaign colors must be approved by Marketing and Web Services prior to use.
Paragraph text goes here. Use this area to give users some additional info.
Code
<div class="elements-box gray-bg shadow"> <img alt="Strong Memorial Hospital" class="box-img full-width" src="/MediaLibraries/URMCMedia/web-services/style-guide/images/box1.JPG" /> <div class="box-accent yellow purple green"></div> <div class="box-icon-small yellow purple green without-img"> <i class="fa fa-fw fa-medkit"></i> </div> <h2 class="box-header"></h2> <p class="box-copy">Paragraph text goes here. Use this area to give users some additional info.</p> <div class="box-link"> <a class="cta-btn yellow purple green" href="/strong-memorial">Link text</a> </div> </div>