< Back to Home

Styleguide

This page contains the single source of truth for site-wide styles.

Typography

Header H1

Header H2

Header H3

Header H4

Header H5
Header H6
Headers

Native <h1> - <h6> tags

Heading Display
Heading Display Large
Heading Display Medium
Heading Display Small
Display Headings
font-body (default)
font-header (default)
font-alt (default)
Fonts

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.

Label
A text link
Block Quote
Paragraphs, Text, & Links
  1. Ordered List Item 1
  2. Ordered List Item 2
  3. Ordered List Item 3
  • Unordered List Item 1
  • Unordered List Item 2
  • Unordered List Item 3
Lists

Ordered and Unordered Lists

Text Align
text-left
text-center
text-right
Text Size
text-xs
text-sm
text-md
text-lg
text-xl
Text Weight (Thickness)
text-thin
text-normal
text-bold
Text Opacity (Transparency)
text-lightest
text-light
text-opaque
text-contrast-darkest
text-contrast-dark
text-contrast
Text Utilities

Global Combo Classes to Alter Text

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.

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.

  • The rich text element allows you to create and format headings
  • Headings, paragraphs, blockquotes, figures, images, and figure captions
  • A rich text element can be used with static or dynamic content.
Rich Text

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.

Layout & Structure

Text Block inside a container inside a section. The contents of the container flow according to initial values.
Text Block pushed LEFT inside a container inside a section
Text Block pushed CENTER inside a container inside a section
Text Block pushed RIGHT inside a container inside a section
Sections

Sections are a way to group content of a common theme or idea. They are full width. To organize content within a section, place containers (see below) or other layout elements within the section.

Colors

Grayscale
BRand Colors
Alert Colors
Background Colors

Components

Buttons

Native <h1> - <h6> tags

Dividers

Native <h1> - <h6> tags