Headings

Headings Jumbo

h1 {font-size: 6rem;} [4.5rem, 4rem, 3.5rem]

Heading 1

h1 {font-size: 4.5rem;} [3.5rem / 3rem]

Lorem ipsum dolor sit amet, consectetur

h2 {font-size: 2.75rem;} [2.5rem / 2.5rem]

Heading 3

h3 {font-size: 2rem;} [1.75rem / 1.75rem]

Heading 4

h4 {font-size: 1.125rem;}
Lists
  • Item in an unordered bulleted list
  • Item in an unordered bulleted list
  • Item in an unordered bulleted list
Unordered List
  1. Item in an ordered bulleted list
  2. Item in an ordered bulleted list
  3. Item in an ordered bulleted list
Ordered list
  • Item in an ordered unstyled list
  • Item in an ordered unstyled list
  • Item in an ordered unstyled list
Unstyled List
Text Elements

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

.intro { font-size: 1.375rem; } [1.25rem]

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Link sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

body, p { font-size: 1.125rem; } [1rem]
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
p-small {font-size: 0.87rem;}
Design is the method of putting form and content together. Design, just as art, has multiple definitions; there is no single definition. Design can be art. Design can be aesthetics. Design is so simple, that's why it is so complicated.
Paul Rand
.quote {font-size: 1.75rem;} [1.5rem]
source {font-size: 1.25rem;}

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.

Another heading

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!

  • List Item 1
  • List Item 2
  • List Item 3

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.

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.

Brand Colors
color-brand--01
color-brand--01-lighter
color-brand--02
color-brand--02-lighter
color-brand--03
Text Colors
Text Color Dark
text-color-dark
Text Color Light
txt-color-light
Text Color Lighter
txt-color-lighter
Background Colors
color-bg--01
color-bg--01-lighter
color-bg--02
color-bg--02-lighter
color-bg--03
color-bg--03-lighter
color-bg--04
color-bg--04-lighter
color-bg--05
color-bg--05-lighter
color-bg--06
color-bg--06-lighter
color-bg--07
color-bg--07-lighter
Padding Top & Bottom
Padding Top and Bottom Small .5rem | py-xs
Padding Top and Bottom Small 1.5rem | py-s
Padding Top and Bottom Small 2.5rem | py-m
Padding Top and Bottom Large 4rem | py-l
Padding Top and Bottom Extra Large 6rem | py-xl
Margin Top & Bottom
Margin Top and Bottom Small 1.5rem | my-s
Margin Top and Bottom Medium 2.5rem | my-m
Margin Top and Bottom Large 4rem | my-l
Margin Top and Bottom Xtra Large 6rem | my-xl
Margin Bottom
Margin Bottom Small 1.5rem | mb-s
Margin Bottom Medium 2.5rem | mb-m
Margin Bottom Large 4rem | mb-l
Margin Bottom Xtra Large 6rem | mb-xl
Margin Top
Margin Top Small 1.5rem | mt-s
Margin Top Medium 2.5rem | mt-m
Margin Top Large 4rem | mt-l
Margin Top Xtra Large 6rem | mt-xl