Style Guide

This guide offers comprehensive instructions on various design elements, ranging from color schemes and typography to button styles and text sizes.

Colors

Primary
Secondary
Light Gray
Black
White

Headings & Paragraph

H1

H2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, eiusmod tempor incididunt ut labore et dolore magna. Faucibus nisl tincidunt eget nullam ipsum non.

Quis risus sed vulputate odio. Nisl suscipit adipiscing bibendum est. Aliquet bibendum enim facilisis gravida.

Risus feugiat in ante metus dictum at. Sit amet commodo nulla facilisi nullam vehicula ipsum a arcu. Ipsum nunc aliquet bibendum enim facilisis gravida neque.

Et netus et malesuada fames. Dui faucibus in ornare quam viverra. Lobortis scelerisque fermentum faucibus orci.

Rich 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.

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.

Image Caption
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Bullet list 1
  • Bullet list 2
  • Bullet list 3
  1. Number List 1
  2. Number List 2
  3. Number List 3

Buttons

Button

Button with Icon

SUBMIT Button