Styles

Typography

Fonts

Inter

Headings + Body

Type: Sans Serif
Weights: Variable

Headings

H1 Headings

Element

H2 Headings

Element

H3 Headings

Element

H4 Headings

Element

H4 Headings
Element
H4 Headings
Element
h1
Class
h2
Class
h3
Class
h4
Class
h5
Class
h6
Class

Body

paragraph-xl

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

paragraph-lg

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

Body
Paragraphs

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

paragraph-sm

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

eyebrow
Lorem Ipsum
All Ordered Lists
  1. Example Ordered List
  2. Example Ordered List
All Unordered Lists
  • Example Unordered List
  • Example Unordered List

Color

Background

Brand

Red

#D91E18
u-bg-red

Red Light

#FFE9E9
u-bg-redlight

Red Dark

#A7140F
u-bg-reddark

Neutral

Black

#000000
u-bg-black

Grey 900

#1D1D1D
u-bg-grey900

Grey 800

#252323
u-bg-grey800

Grey 600

#555555
u-bg-grey600

Grey 500

#707070
u-bg-grey500

Grey 50

#F6F6F6
u-bg-grey50

White

#ffffff
u-bg-white

Text

Aa

Red

#D91E18
u-text-red
Aa

Red Light

#FFE9E9
u-text-red
Aa

Red Dark

#A7140F
u-text-red
Aa

Black

#000000
u-text-black
Aa

Grey 900

#1D1D1D
u-text-grey900
Aa

Grey 800

#252323
u-text-grey800
Aa

Grey 600

#555555
u-text-grey600
Aa

Grey 500

#707070
u-text-grey500
Aa

Grey 50

#F6F6F6
u-text-grey50
Aa

White

#FFFFFF
u-text-white

Modes

Aa

Base

u-mode-base
Aa

Invert

u-mode-invert
Aa

Accent 1

u-mode-accent1
Aa

Accent 2

u-mode-accent2
Aa

Accent 3

u-mode-accent3

Utilities

Margin

Top

u-mt-0
margin-top: 0;
u-mt-xs
margin-top: 0.5em;
u-mt-sm
margin-top: 1em;
u-mt-md
margin-top: 2em;
u-mt-lg
margin-top: 3em;

Bottom

u-mb-0
margin-bottom: 0;
u-mb-xs
margin-bottom: 0.5em;
u-mb-sm
margin-bottom: 1em;
u-mb-md
margin-bottom: 2em;
u-mb-lg
margin-bottom: 3em;

Other

u-m-0
margin: 0;
u-mlr-auto
margin: 0 auto; (centers element))
u-mt-auto
margin-top: auto;
u-mb-auto
margin-bottom: auto;

Padding

Top

u-pt-0
padding-top: 0;

Bottom

u-pb-0
padding-bottom: 0;

Other

u-p-0
padding: 0;

Text

Alignment

u-text-center
text-align: center;
u-text-right
text-align: right;
u-text-left
text-align: left;

Clamping

u-text-clamp-1
Multiple properties

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.

u-text-clamp-2
Multiple properties

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.

u-text-clamp-3
Multiple properties

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.

Wrapping

u-text-balance
text-wrap: balance;

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

u-text-pretty
text-wrap: pretty;

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

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-d-inline-flex
display: inline-flex;
u-position-relative;
position: relative;
u-position-sticky;
position: sticky;

Responsive modifiers

u-md-d-none
display: none; (Tablet down)
u-sm-d-none
display: none; (Mobile (L) down)
u-xs-d-none
display: none; (Mobile only)
u-md-d-block
display: block; (Tablet down)
u-sm-d-block
display: block; (Mobile (L) down)
u-xs-d-block
display: block; (Mobile only)

Size

u-w-100
width: 100%;
u-h-100
height: 100%;
u-minh-100vh
min-height: 100vh;

Aspect ratio

u-aspect-1x1
Multiple properties
u-aspect-16x9
Multiple properties
u-aspect-4x3
Multiple properties

Helpers

u-img-cover
Multiple properties
u-link-cover
Multiple properties
Open link
u-z-index-1
Multiple properties
u-sr-only
Multiple properties
Screen Reader Only
u-border
Multiple properties
u-text-caps
Multiple properties

Layout

Section

section

Container

container

Grid

col
col
col
col
col
col
col
col
col
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
col
col
row
row-align-end
col
col
col

Justify columns

row
row-justify-end
col
col
row
row-justify-center
col
col
row
row-justify-around
col
col
row
row-justify-between
col
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

Gap modifiers

Medium gap (set from Grid Gap - MD variable)

row
row-gap-md
col
col
col
col
col
col

Small gap (set from Grid Gap - SM variable)

row
row-gap-sm
col
col
col
col
col
col

No gap

row
row-gap-0
col
col
col
col
col
col

Other columns modifiers

Shrink Column

col
col-shrink
col

Do Not Remove – Prevent Cleanup