Box
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>
- <div class="desktop-flex box-row">
- 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>
- <div class="desktop-flex box-row">
- 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.
Heading Goes Here
Paragraph text goes here. Use this area to give users some additional info.
Code
<div class="elements-box"> <h2 class="box-header">Heading Goes Here</h2> <p class="box-copy">Paragraph text goes here. Use this area to give users some additional info.</p> <div class="box-link"> <a href="/strong-memorial">Link text</a> </div> </div>