Style Guide

Color

BG Primary
BG Secondary
BG Accent
BG Light
BG Black
BG White
You can override a text element's text color by adding a class of Text {Color Name}. Alternatively, you can add it to the parent container to override all of its children (if those children are not already set.)

Lorem Ipsum

Text Primary

Lorem Ipsum

Text Accent

Lorem Ipsum

Text Black

Lorem Ipsum

Text Error

Lorem Ipsum

Text Success

Typography

Add the utility class Last to remove the bottom margin from an element. For example, when you want to remove the bottom spacing from the last paragraph in a section.
This is a title heading
Display Heading

This is Heading 1

H1

This is Heading 2

H2

This is Heading 3

H3

This is Heading 4

H4
This is Heading 5
H5
This is Heading 6
H6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus. Inline text link

Paragraph
  • Unordered list item
  • Unordered list item
  • Unordered list item
Unordered List
  1. Ordered list item
  2. Ordered list item
  3. Ordered list item
Ordered List

Rich text element

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique

Static and dynamic content editing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique

How to customize formatting for each rich text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum.
Figure 1-1 — This is the caption for the above image.
Rich Text

Utility Style

Use these classes to change an element's styling. Useful for overriding certain styles.
Remove last margin
Last
Hidden on screen widths 991px and down
Hide Tablet
Hidden on screen widths 767px and down
Hide Mobile Landscape
Hidden on screen widths 478px and down
Hide Mobile Portrait
Button Primary
Button Secondary
Button Primary
Button Secondary