View the style guide on a desktop, lower breakpoints are not supported for a better experience.

Typography Color Components Utilities Layout Mast Docs ↗

Typography

Fonts

Ovo

Headlines

Type: Sans Serif

Weights: 400, 500

Manrope

Titles, buttons, text

Type: Sans Serif

Weights: Variable font

Headings

H1 Headings

All

H2 Headings

All

H3 Headings

All

H4 Headings

All

HTML Headings Tags

HTML tags define default Heading styles.

Class

Heading Classes

Heading classes when typography style doesn't match the default HTML tag.

Body

paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

All Unordered Lists

Example Unordered List
Example Unordered List

All Ordered Lists

Example Ordered List
Example Ordered List

Text HTML Tags

HTML tags define default text styles.

paragraph-1.5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

paragraph-1.25

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

paragraph-0.9

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

eyebrow

Lorem Ipsum

Text Styles

Text sizes classes when typography size doesn't match the default HTML tag.

Colors

Color backgrounds

Red

#972E1d

u-bg-red

Black

#050501

u-bg-black

Dark Gray

#565A56

u-bg-dark-gray

Medium Gray

#929692

u-bg-medium-gray

Light gray

#F5F6F5

u-bg-light-gray

White

white

u-bg-white

Color Swatches

Easily customize colors using variables. To change a container's background color, simply apply the class u-bg-'yourcolor'.

Text

Text Red

#d14424

u-text-red

Text Black

#1d1c1a

u-text-black

Text Dark Gray

#1d1c1a

u-text-dark-gray

Text Medium Gray

#929692

u-text-medium-gray

Text White

white

u-text-white

Text Color

To change text color, simply apply the class u-bg-'yourcolor' to a container or text element.

Components

Button

Text

Text Link

All Links

Button

Default

btn

Button

Secondary

btn

cc-secondary

Button

Secondary

btn

cc-tertiary

Text

Text Link Light

u-text-white

Form

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Card

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Utilities

Margin

Top

u-mt-0

margin-top: 0;

u-mt-1

margin-top: 1em;

u-mt-2

margin-top: 2em;

u-mt-3

margin-top: 3em;

u-mt-auto

margin-top: auto;

Bottom

u-mb-0

margin-bottom: 0;

u-mb-1

margin-bottom: 1em;

u-mb-2

margin-bottom: 2em;

u-mb-3

margin-bottom: 3em;

Other

u-m-0

margin: 0;

u-mlr-auto

margin: 0 auto; (centers element))

u-mr-1

margin-right: 1em;

u-ml-1

margin-left: 1em;

Padding

Top

u-pt-0

padding-top: 0;

u-pt-1

padding-top: 1em;

u-pt-2

padding-top: 2em;

u-pt-3

padding-top: 3em;

Bottom

u-pb-0

padding-bottom: 0;

u-pb-1

padding-bottom: 1em;

u-pb-2

padding-bottom: 2em;

u-pb-3

padding-bottom: 3em;

Other

u-p-0

padding: 0;

u-p-1

padding: 1em;

Alignment

u-text-center

text-align: center;

u-text-right

text-align: right;

Overflow

u-overflow-hidden

overflow: hidden;

u-overflow-visible

overflow: visible;

Display + position

u-d-none

display: none;

u-d-block

display: block;

u-d-flex

display: flex;

u-position-relative;

position: relative;

Size

u-w-100

width: 100%;

u-h-100

height: 100%;

Helpers

u-img-cover

Multiple properties

u-link-cover

Multiple properties

u-aspect-1x1

Multiple properties

u-z-index-1

Multiple properties

u-sr-only

Multiple properties

u-border

Multiple properties

Layout

Section

section

Container

container

Grid

col

Grid - Desktop

col

col-lg
-1

col

col-lg-11

col

col-lg-2

col

col-lg-10

col

col-lg-3

col

col-lg-9

col

col-lg-4

col

col-lg-8

col

col-lg-5

col

col-lg-7

col

col-lg-6

col

col-lg-6

col

col-lg-12

Grid - Tablet

col

col-md-1

col

col-md-11

col

col-md-2

col

col-md-10

col

col-md-3

col

col-md-9

col

col-md-4

col

col-md-8

col

col-md-5

col

col-md-7

col

col-md-6

col

col-md-6

col

col-md-12

Grid - Mobile Landscape

col

col-sm-1

col

col-sm-11

col

col-sm-2

col

col-sm-10

col

col-sm-3

col

col-sm-9

col

col-sm-4

col

col-sm-8

col

col-sm-5

col

col-sm-7

col

col-sm-6

col

col-sm-6

col

col-sm-12

Grid - Mobile Portrait

col

col-xs-1

col

col-xs-11

col

col-xs-2

col

col-xs-10

col

col-xs-3

col

col-xs-9

col

col-xs-4

col

col-xs-8

col

col-xs-5

col

col-xs-7

col

col-xs-6

col

col-xs-6

col

col-xs-12

Align columns

row

row-align-center

col

row

row-align-end

col

Justify columns

row

row-justify-end

col

row

row-justify-center

col

row

row-justify-around

col

row

row-justify-between

col

Reorder columns

col

col-lg-first

col

col-md-first

col

col-sm-first

col

col-xs-first

col

col-lg-last

col

col-md-last

col

col-sm-last

col

col-xs-last

Other columns modifiers

Shrink Column

col

col-shrink

col

Gutterless Column

row

row-no-gutters

col

col-no-gutters

col

col-no-gutters

col

col-no-gutters

col

col-no-gutters

Style guide

Typography

Fonts

Headlines

Titles, buttons, text

Headings

All

All

All

All

HTML Headings Tags

Heading Classes

Body

Text HTML Tags

Text Styles

Colors

Color backgrounds

Red

Black

Dark Gray

Medium Gray

Light gray

White

Color Swatches

Text

Text Red

Text Black

Text Dark Gray

Text Medium Gray

Text White

Text Color

Components

Button

Text Link

Default

Secondary

Secondary

Text Link Light

Form

Card

Default

Default

Default

Utilities

Margin

Top

Bottom

Other

Padding

Top

Bottom

Other

Alignment

Overflow

Display + position

Size

Helpers

Layout

Section

Container

Grid

Grid - Desktop

Grid - Tablet

Grid - Mobile Landscape

Grid - Mobile Portrait

Align columns

Justify columns

Reorder columns

Other columns modifiers

Shrink Column

Gutterless Column

Press coverage