Skip to main content
menu

URMC Web Services

URMC / Web Services / 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>
  • 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.

Box Options



Find image url in media library
List of icons


Heading Goes Here

Paragraph text goes here. Use this area to give users some additional info.

Link text

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>