Style Guide

Pro-tips: Paste this content into a dedicated page named “Style guide”. Convert each color style below to global swatches so they can be used in text, borders, backgrounds, and gradients. To do this, select a color style element, navigate to the Background Color section in the Style panel, edit the color, and add it as a global swatch.

Text styles

Lorem ipsum dolor

Neue Haas Grotesk Display Pro 55 Roman 236px/122.22222089767456%

Lorem ipsum dolor

Neue Haas Grotesk Display Pro 55 Roman 181px/122.22222089767456%

Lorem ipsum dolor

Neue Haas Grotesk Display Pro 55 Roman 138px/122.22222089767456%

Lorem ipsum dolor

Neue Haas Grotesk Display Pro 55 Roman 105px/122.22222089767456%

Lorem ipsum dolor

Neue Haas Grotesk Display Pro 55 Roman 80px/122.22222089767456%

Lorem ipsum dolor

Neue Haas Grotesk Display Pro 55 Roman 61px/122.22222089767456%

Lorem ipsum dolor

Neue Haas Grotesk Display Pro 55 Roman 47px/122.22222089767456%

Lorem ipsum dolor

Neue Haas Grotesk Display Pro 55 Roman 36px/122.22222089767456%

Lorem ipsum dolor

Neue Haas Grotesk Display Pro 55 Roman 27px/122.22222089767456%

Lorem ipsum dolor

Neue Haas Grotesk Display Pro 55 Roman 21px/122.22222089767456%

Lorem ipsum dolor

Neue Haas Grotesk Display Pro 55 Roman 16px/122.22222089767456%

Lorem ipsum dolor

Neue Haas Grotesk Display Pro 55 Roman 12px/122.22222089767456%

Lorem ipsum dolor

Neue Haas Grotesk Display Pro 55 Roman 9px/122.22222089767456%

Lorem ipsum dolor

Roc Grotesk Regular 9px/122.22222089767456%

Lorem ipsum dolor

Roc Grotesk Regular 12px/122.22222089767456%

Lorem ipsum dolor

Roc Grotesk Regular 16px/122.22222089767456%

Lorem ipsum dolor

Roc Grotesk Regular 21px/122.22222089767456%

Lorem ipsum dolor

Roc Grotesk Regular 27px/122.22222089767456%

Lorem ipsum dolor

Roc Grotesk Regular 36px/122.22222089767456%

Lorem ipsum dolor

Roc Grotesk Regular 47px/122.22222089767456%

Lorem ipsum dolor

Roc Grotesk Regular 61px/122.22222089767456%

Lorem ipsum dolor

Roc Grotesk Regular 80px/122.22222089767456%

Lorem ipsum dolor

Roc Grotesk Regular 105px/122.22222089767456%

Lorem ipsum dolor

Roc Grotesk Regular 138px/122.22222089767456%

Lorem ipsum dolor

Roc Grotesk Regular 181px/122.22222089767456%

Lorem ipsum dolor

Roc Grotesk Regular 236px/122.22222089767456%

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.

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.

Hello

Hello

Hello

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.

Color styles