Modular & Consistent

Style Guide

Type

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This is some large body text.
This is a some body text
This is some small body text.
This is some muted body text.

This is a paragraph. This is a link. 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.

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.

Text Left
Text Center
Text Right

Colors

Brand

Primary

#fef214

Secondary

#00b3ff

Accent

#ca3539

Neutral

Black

#383535

Dark Gray

#4c4c4c

Gray

#808080

Light Gray

#bababa

Lighter Gray

#f3f3f3

White

#000

Forms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Cards

Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare,

Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare,

Boxes

This is a Box

A box is perfect to display an announcement or something that you really want to be noticed. It's similar to a card, but simpler.

This is a Box with a Primary Background

A box is perfect to display an announcement or something that you really want to be noticed.

Spacing

Margin Top
Extra Small
6px
Margin Top
Small
12px
Margin Top
Smedium
24px
Margin Top
Medium
36px
Margin Top
48px
Margin Top
Large
96px
Margin Top
Extra Large
120px

Grid

Grid

Grid - 3 Wide

Grid - 2 Wide

Columns

Webflow

Custom

Helpers

Flex

If you need more flex options, keep adding classes so you can use dynamic flex containers

Flex Container
Flex display and Aligned Center
Flex Container
Justify Space Between
Flex display, Aligned Center, and Justify Space Between