Style guide

You can customize any of the styles here, and you'll see them reflected everywhere across the site.

Color

Add a class of BG {Color Name} to an element to override its background color. The template's colors are named such that you can change them without having to change the class names. Simply follow this guide to change the global swatches.
BG Primary
BG Secondary
BG Accent
BG Light
BG Darker
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 White

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.
Lorem ipsum dolor sit amet
Display Heading

Lorem ipsum dolor sit amet

H1

Consectetur adipiscing elit

H2

Lorem ipsum dolor sit amet

H3

Consectetur adipiscing elit

H4
Sed convallis lobortis
H5
Lorem ipsum dolor sit amet
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

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

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

Utilities

Use these classes to change an element's styling. Useful for overriding certain styles.
Removes margin from last element
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