You need to enable JavaScript in order to use the AI chatbot tool powered by ChatBot

Styles

Typography

Early Sans

Headings + Body

Type: Sans Serif
Weights: Light (300), Regular (400), Medium (500), Bold (700)

Owners Wide

Label

Type: Sans Serif
Weights: Medium (500)
Tags
H1 Headings

Element

H2 Headings

Element

H3 Headings

Element

H4 Headings

Element

H5 Headings
Element
H6 Headings
Element
Baseline
display-large
Class
display-medium
Class
display-small
Class
headline-large
Class
headline-medium
Class
headline-small
Class
title-large
Class
title-medium
Class
title-small
Class
label-large
Class
label-medium
Class
label-small
Class
label-extra-small
Class
label-extra-extra-small
Class
Emphasis
display-large
emphasis
Class
display-medium
emphasis
Class
display-small
emphasis
Class
headline-large
emphasis
Class
headline-medium
emphasis
Class
headline-small
emphasis
Class
title-large
emphasis
Class
title-medium
emphasis
Class
title-small
emphasis
Class
body-lg

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

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.

body-md

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

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

body-sm

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

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

body-xs

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

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

All Ordered Lists
  1. Example Ordered List
  2. Example Ordered List
All Unordered Lists
  • Example Unordered List
  • Example Unordered List
List with icons
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

Color

Primary

Primary

#1f2959
u-bg-primary

Secondary

Secondary

#0c6771
u-bg-secondary

Neutral

On Surface

#1d1b20
u-bg-on-surface

Inverse Surface

#33393f
u-bg-inverse-surface

Surface Container Highest

#c9d2db
u-bg-surface-container-highest

Surface Container

#e3eaef
u-bg-surface-container

White

#ffffff
u-bg-white
Aa

On Primary

#ffffff
u-text-primary
Aa

On Secondary

#ffffff
u-text-on-secondary
Aa

On Surface

#1d1b20
u-text-on-surface
Aa

Base

u-mode-base
Aa

Invert

u-mode-invert
Aa

Primary Container

u-mode-primary-containter
Aa

Secondary Surface

u-mode-secondary-surface

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

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

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

U.S. Veteran