Components and styles

Colors

Background

.bg-orange-accent-container-primary
.bg-orange-accent-container-secondary
.bg-orange-accent-container-tertiary
.bg-dark-surface-primary
.bg-dark-surface-secondary
.bg-dark-surface-tertiary
.bg-light-surface-primary
.bg-light-surface-secondary
.bg-light-over-surface-primary

Text

Text sample
.txt-orange-on-accent-container-primary
Text sample
.txt-orange-dark-accent
Text sample
.txt-orange-light-accent
Text sample
.txt-dark-on-surface-primary
Text sample
.txt-dark-on-surface-secondary
Text sample
.txt-dark-on-surface-tertiary
Text sample
.txt-dark-on-surface-quaternary
Text sample
.txt-dark-on-surface-quinary
Text sample
.txt-light-on-surface-primary
Text sample
.txt-light-on-surface-secondary
Text sample
.txt-light-on-surface-tertiary
Text sample
.txt-light-on-surface-quaternary
Text sample
.txt-light-on-surface-quinary

Borders

.dark-outline-primary
.light-outline-primary
.light-outline-secondary
This is some text inside of a div block.
Label
Label
Label
Label
arrow_forward_ios

Text

Base styles

Heading L
Heading M
Heading S
Subheading L
Subheading M
Base L
Base M
Base S
Mini

Variant properties

Regular
Medium
Semibold
One-liner
Line height 150%
Italic
Strikethrough
Underscore
align-left
align-center
align-right

Reset HTML text elements

Heading 1

Heading 2

Heading 3

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Text Link

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!

This is a link

  • item
  • item
  • item
  1. item
  2. item
  3. item

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.