Style guide

Typography

Heading classes

heading-style-h1

This is a sample text to help you understand how real text may look.

heading-style-h2

This is a sample text to help you understand how real text may look.

heading-style-h2
font-pixel

This is a sample text to help you understand how real text may look.

heading-style-h2
heading-small-small

This is a sample text to help you understand how real text may look.

heading-style-h3

This is a sample text to help you understand how real text may look.

heading-style-h4

This is a sample text to help you understand how real text may look.

Text classes

Text sizes

text-size-big
Sample text is being used as a placeholder for real text that is normally present.
text-size-regular
Sample text is being used as a placeholder for real text that is normally present.
text-size-small
Sample text is being used as a placeholder for real text that is normally present.
text-size-tiny
Sample text is being used as a placeholder for real text that is normally present.

Text weights

text-weight-400
Sample text is being used as a placeholder for real text that is normally present.
text-weight-300
Sample text is being used as a placeholder for real text that is normally present.
text-weight-200
Sample text is being used as a placeholder for real text that is normally present.

Text styles

text-style-allcaps
Sample text is being used as a placeholder for real text that is normally present.
text-style-itallic
Sample text is being used as a placeholder for real text that is normally present.
text-style-strikethrough
Sample text is being used as a placeholder for real text that is normally present.
text-style-link
text-align-indent
Sample text is being used as a placeholder for real text that is normally present.

Text alignments

text-align-left
Sample text is being used as a placeholder for real text that is normally present.
text-align-center
Sample text is being used as a placeholder for real text that is normally present.
text-align-right
Sample text is being used as a placeholder for real text that is normally present.

Text components

blog_rte

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.

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!

A person with glasses sitting at the table, working on their laptop

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.

Colors

Color palette

#220d2c
#220d2c
#220d2c
#fbfbfb
#cfd8d7
#ff6e4e
#fb6341
#fb6341
#6c0362
#6c0362
#6c0362
#fcff52
#565656
#cccccc
#ffffff

Text colors

text-color-violet
Sample text is being used as a placeholder for real text that is normally present.
text-color-magenta
Sample text is being used as a placeholder for real text that is normally present.
text-color-grey
Sample text is being used as a placeholder for real text that is normally present.
text-color-grey-50
Sample text is being used as a placeholder for real text that is normally present.
text-color-white
Sample text is being used as a placeholder for real text that is normally present.
text-color-light-grey
Sample text is being used as a placeholder for real text that is normally present.
text-color-platinum
Sample text is being used as a placeholder for real text that is normally present.
text-color-orange-accessible
Sample text is being used as a placeholder for real text that is normally present.
text-color-orange
Sample text is being used as a placeholder for real text that is normally present.
text-color-orange-80
Sample text is being used as a placeholder for real text that is normally present.
text-color-magenta-50
Sample text is being used as a placeholder for real text that is normally present.

Background colors

background-color-violet
background-color-violet-80
background-color-violet-50
background-color-it-white
background-color-it-platinum
background-color-it-orange
background-color-it-orange-80
background-color-it-orange-50
background-color-it-orange-accessible
background-color-it-magenta
background-color-it-magenta-80
background-color-it-magenta-50
background-color-it-yellow
background-color-it-web-grey
background-color-it-web-light-grey
background-color-it-web-white

Arrow backgrounds

background-arrow-violet
background-arrow-platinum
top-arrow
arrow-color-white
top-arrow
arrow-color-platinum

Arrow top

arrow-top
text-color-white

Components

Buttons

button
is-small
Button Text
button
white-label
Button Text
button
is-orange-50
Button Text
button
is-outlined
Button Text
button
is-outlined-alt
Button Text
button
is-light
button
is-outlined
is-light

Global components

button
is-small
Button Text
button
white-label
Button Text
button
is-outlined
Button Text
button
is-outlined-alt
Button Text
button
is-light

Structure classes

page-wrapper
main-wrapper
container-xxsmall
container-xsmall
container-small
container-medium
container-large
padding-global
padding-section-global
padding-section-small
padding-section-medium
padding-section-large

Spacing

Margins

Direction classes

margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right

Size classes

margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge

Paddings

Direction classes

padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right

Size classes

padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge