Styleguide

Last update: October, 15th

Texts

Global headings

H1

Heading H1

H2

Heading H2

H3

Heading H3

H4

Heading H4

Overriden heading sizes

.heading-xlarge
This is some text inside of a div block.
.heading-large

Other HTML tags

Paragraph

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.

Text sizes

.text-xsmall | 13px/0.9em
This is some text inside of a div block.
.text-small | 14px/0.97em
This is some text inside of a div block.
.text-large | 18px/1.25em
This is some text inside of a div block.

Text weights

.text-weight-semibold
This is some text inside of a div block.

Text styles

.text-style-allcaps
This is some text inside of a div block.

Text colors

.text-color-light
This is some text inside of a div block.

Text alignment

.text-align-center
This is some text inside of a div block.

Rich text styling

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.

Colors

Common colors

.is--color-primary
.is--color-secondary
.is--grey-20

Warming Stripes

.is--color-warmingstripes-1950
.is--color-warmingstripes-1960
.is--color-warmingstripes-1970
.is--color-warmingstripes-1980
.is--color-warmingstripes-1990
.is--color-warmingstripes-2000
.is--color-warmingstripes-2010
.is--color-warmingstripes-2020
.is--color-warmingstripes-2030
.is--color-warmingstripes-2040
.is--color-warmingstripes-2050
.is--color-warmingstripes-2060
.is--color-warmingstripes-2070
.is--color-warmingstripes-2080
.is--color-warmingstripes-2090
.is--color-warmingstripes-2100
.is--color-warmingstripes-bad-2030
.is--color-warmingstripes-bad-2040
.is--color-warmingstripes-bad-2050
.is--color-warmingstripes-bad-2060
.is--color-warmingstripes-bad-2070
.is--color-warmingstripes-bad-2080
.is--color-warmingstripes-bad-2090
.is--color-warmingstripes-bad-2100

UI Elements

Buttons

Normal buttons

Width Classes

Containers

.container-full
.container-medium
.container-small

Max widths

.maxwidth-xxsmall

Spacing Classes

Margins

.margin-0
.margin-tiny
.margin-bottom-tiny
.margin-bottom-medium (64px/4.44em)
.margin-bottom-xlarge (185px/12.85em)

Paddings

.padding-0
.padding-tiny
.padding-vertical-large (90px/6.25em)
.padding-bottom-large (130px/9em)
.padding-top-large (130px/9em)