Styles

Typography

Inter Display

Sans Display

Type: Sans Serif
Weights: Semibold (600)

Inter

Sans Body

Type: Sans Serif
Weights: Normal (400)

Mixta Sharp

Serif Display

Type: Serif
Weights: Bold (700)

Freight Text Pro

Serif Body

Type: Serif
Weights: Normal (400)
H1 Headings

Element

H2 Headings

Element

H3 Headings

Element

H4 Headings

Element

H5 Headings
Element
H6 Headings
Element
h1
Class
h2
Class
h3
Class
h4
Class
h5
Class
h6
Class
sans-display
Class
serif-display
Class
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

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

paragraph-article

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
rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote
<div>example code block here</div>

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

article-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

This is a caption
<div>example code block here</div>

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript


Color

Yellow

yellow-900

u-bg-yellow-900

yellow-700

u-bg-yellow-700

yellow-500

u-bg-yellow-500

yellow-300

u-bg-yellow-300

yellow-100

u-bg-yellow-100

Dark Blue

dark-blue-900

u-bg-dark-blue-900

dark-blue-700

u-bg-dark-blue-700

dark-blue-500

u-bg-dark-blue-500

dark-blue-300

u-bg-dark-blue-300

dark-blue-100

u-bg-dark-blue-100

Light Blue

light-blue-900

u-bg-light-blue-900

light-blue-700

u-bg-light-blue-700

light-blue-500

u-bg-light-blue-500

light-blue-300

u-bg-light-blue-300

light-blue-100

u-bg-light-blue-100

Sidewalk

sidewalk-900

u-bg-sidewalk-900

sidewalk-700

u-bg-sidewalk-700

sidewalk-500

u-bg-sidewalk-500

sidewalk-300

u-bg-sidewalk-300

sidewalk-100

u-bg-sidewalk-100

sidewalk-50

u-bg-sidewalk-50
Aa

Accent

u-text-accent
Aa

dark-blue-700

u-text-dark-blue-700
Aa

sidewalk-50

u-text-sidewalk-50

Theme

Aa

Dark

u-theme-dark-blue
Aa

White

u-theme-white
Aa

Light Blue

u-theme-light-blue
Aa

Yellow

u-theme-yellow

Utilities

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;

Top

u-pt-0
padding-top: 0;

Bottom

u-pb-0
padding-bottom: 0;

Other

u-p-0
padding: 0;

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.

u-overflow-hidden
overflow: hidden;
u-overflow-visible
overflow: visible;
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)
u-w-100
width: 100%;
u-h-100
height: 100%;
u-minh-100vh
min-height: 100vh;
u-aspect-1x1
Multiple properties
u-aspect-16x9
Multiple properties
u-aspect-4x3
Multiple properties
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-full-height-center
Multiple properties

Layout

section
container
col
col
col
col
col
col
col
col
col
col
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
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
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
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
row
row-align-center
col
col
col
row
row-align-end
col
col
col
row
row-justify-end
col
col
row
row-justify-center
col
col
row
row-justify-around
col
col
row
row-justify-between
col
col
col
col-lg-offset-1
col
col-lg-offset-2
col
col-lg-offset-3
col
col-lg-offset-4
col
col-lg-offset-5
col
col-lg-offset-6
col
col-md-offset-0
col
col-md-offset-1
col
col-md-offset-2
col
col-md-offset-3
col
col-md-offset-4
col
col-md-offset-5
col
col-md-offset-6
col
col-sm-offset-0
col
col-sm-offset-1
col
col-sm-offset-2
col
col-sm-offset-3
col
col-sm-offset-4
col
col-sm-offset-5
col
col-sm-offset-6
col
col-xs-offset-0
col
col-xs-offset-1
col
col-xs-offset-2
col
col-xs-offset-3
col
col-xs-offset-4
col
col-xs-offset-5
col
col-xs-offset-6
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

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

Button gap (set from Grid / Gap Button variable)

row
row-gap-button
Button
Button

No gap

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

Shrink column

col
col-shrink
col

Contained column

col
col-lg-contain-left
col
col
col
col-lg-contain-right