Enter

Typography

Styling text

Heading XXLarge

.heading--xxlarge

Heading XLarge

.heading--xlarge

Heading Large

.heading--large

Heading small

.heading--medium

Heading small

.heading--small

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

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.

p--large

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.

p--xlarge

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.

p--xxlarge

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.text-style--allcaps

This is some text inside of a div block.

.text-style--link

This is some text inside of a div block.

.text-style--italic

This is some text inside of a div block.

.text-style--striketrough

Block Quote

.text-style--quote

Font weight

This is some text inside of a div block.

.text-weight--bold

This is some text inside of a div block.

.text-weight--medium

This is some text inside of a div block.

.text-weight--normal

This is some text inside of a div block.

.text-weight--light

Text alignment

This is some text inside of a div block.

.text-align--left

This is some text inside of a div block.

.text-align--center

This is some text inside of a div block.

.text-align--right

Text color

This is some text inside of a div block.

.text-color--grey

This is some text inside of a div block.

.text-color--dark

This is some text inside of a div block.

.text-color--white

This is some text inside of a div block.

.text-color--coral

This is some text inside of a div block.

.text-color--bege

This is some text inside of a div block.

.text-color--xmuted– Adds opacity to text.

This is some text inside of a div block.

.text-color--muted– Adds opacity to text.

Richtext

H1

H2

H3

H4

H5

H6

Quote 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.

Link

List item 01
List item 02
List item 03

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.

Buttons and links

Useful globals

Responsive visibility

.hide– hide on all devices.

.hide--tablet– hide starting from tablet resolution.

.hide--mobile-landscape– hide starting from landscape resolution.

.hide--mobile– hide starting from portrait resolution.

Max width

.max-width--xxlarge– 158.6 rem

.max-width--xlarge– 144 rem

.max-width--large– 128 rem

.max-width--medium– 1 02.4 rem

.max-width--small– 76.8 rem

.max-width--xsmall– 51.2 rem

.max-width--xxsmall– 32 rem

Max width full

.max-width-full– Sets max-width to none.

.max-width-full--tablet– Sets max-width to none on tablet.

.max-width-full--landscape– Sets max-width to none on landscape resolution.

.max-width-full--mobile– Sets max-width to none on mobile resolution.

Useful classes as you're building

.align--center– Sets margin left and right to auto. Centers an element inside its parent div.

.overflow--hidden– Sets overflow to hidden.

.overflow--scroll– Sets overflow to scroll.

.postion--relative– Sets position to relative.

Icon classes

.icon--small

.icon--medium

.icon--large

Colors

Responsive visibility

.bg-color--grey

.bg-color--white

.bg-color--green

.bg-color--blue

.bg-color--bege

.bg-color--broken-white

.bg-color--coral

.bg-color--dark

Containers

.container--small

.container--medium

.container--large