Colors

Primary Colors

Primary 1

#0355FF

Secondary Colors

Secondary 1

#EAF1FF

Secondary 2

#D8E5FF

Neutral Colors

Neutral 900

#0F1B44

Neutral 800

#1E2F6D

Neutral 700

#475089

Neutral 600

#646D9C

Neutral 500

#7D84AC

Neutral 400

#D3D6E3

Neutral 300

#E9EBF3

Neutral 200

#F6F9FF

Neutral 100

#FFFFFF

Typography

Rich Text

Heading H1 - Aa Bb Cc Dd

Heading 1 - 48px/1.271em

Heading H2 - Aa Bb Cc Dd

Heading 2 - 32px/1.563em

Heading H3 - Aa Bb Cc Dd

Heading 3 - 22px/1.636em

Heading H4 - Aa Bb Cc Dd

Heading 4 - 20px/1.600em

Heading H5 - Aa Bb Cc Dd

Heading 5 - 18px/1.667em

Heading H6 - Aa Bb Cc Dd

Heading 6 - 16px/1.625em

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.

Paragraph Small - 14px/1.929em

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.

Paragraph Default - 18px/1.778em

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.

Paragraph Large - 20px/2.100em

Link - Lorem ipsum dolor sit amet

Links

Bold - Lorem ipsum dolor sit amet

Bold Text

Italic - Lorem ipsum dolor sit amet

Italic Text

“Vehicula ipsum a arcu cursus vitae. Nec nam aliquam sem et tortor consequat id. Et magnis dis parturient montes nascetur ridiculus nibh mauris lorem. Excepteur sint occaecat cupidatat non proident.”

Block Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur.
Lorem ipsum dolor sit amet, consectetur adipiscing.

Bullet List

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur.
Lorem ipsum dolor sit amet, consectetur adipiscing.

Numbered List

Figure and Figure Caption

Icon Fonts

Line Icons Rounded















































































































































Line Icons Square















































































































































Filled Icons





















































































































Social Media Icons

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.

Heading 2

Normal text

Heading 3

Normal text

Heading 4

Normal text

Heading 5

Normal text

Heading 6

Normal text

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.