Back to Template

Style guide

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 Accent
BG Black
BG White
You can override a text element's font color by adding a class of Color {Color Name}. Alternatively, you can add it to the parent container to override its children (if those children are not already set.)

Lorem Ipsum

Color Primary

Lorem Ipsum

Color Accent

Lorem Ipsum

Color Black

Lorem Ipsum

Color White

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.
She Said Yes
Headline Display
Luke & Lorelai
Headline

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.
Fig 1.0 — This is an image caption
Rich Text

Components

RSVP
Button
CTA Link
Lorem Ipsum DOlor Sit?

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 tristique posuere.

Accordion

Utilities

Use these classes to change an element's styling. Useful for overriding certain styles.
Hidden on screen widths 991px and down
Hide Tablet
Hidden on screen widths 767px and down
Hide Mobile L
Hidden on screen widths 478px and down
Hide Mobile S