Typography
Fonts
Lato
Headings
H1 Headings
Element
H2 Headings
Element
H3 Headings
Element
H4 Headings
Element
H5 Headings
Element
h1
Class
h2
Class
h3
Class
h4
Class
h5
Class
Text Block(Regular)
r1
r1b
This is some text inside of a div block.
This is some text inside of a div block.
r2
r2b
This is some text inside of a div block.
This is some text inside of a div block.
r3
r3b
This is some text inside of a div block.
This is some text inside of a div block.
r4
r4b
This is some text inside of a div block.
This is some text inside of a div block.
Paragraph (Regular)
r1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
r2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
paragraph (r2)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
r3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
r4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
eyebrow
Lorem Ipsum
All Ordered Lists
- Example Ordered List
- Example Ordered List
All Unordered Lists
- Example Unordered List
- Example Unordered List
Colors
Backgrounds - Neutral
N000 - White
#ffffff
u-bg-n000
N999 - Black
#111111
u-bg-n999
N100
#f6f6f6
u-bg-n100
N200
#e5e5e5
u-bg-n200
N300
#c4c4c4
u-bg-n300
N500
#9a9a9a
u-bg-n500
N700
#6d6d6d
u-bg-n700
N900
#505050
u-bg-n900
Backgrounds - Primary
P100
#e8f1fe
u-bg-p100
P200
#a3c8f9
u-bg-p200
P300
#5e9ef5
u-bg-p300
P500
#1975f0
u-bg-p500
P700
#1252a8
u-bg-p700
P900
#072348
u-bg-p900
Backgrounds - Action
F100
#bfe5ef
u-bg-f100
F500
#00abd2
u-bg-f500
F700
#007893
u-bg-f700
FE100
#ffeced
u-bg-fe100
FE500
#ed1c24
u-bg-fe500
FE700
#84101d
u-bg-fe700
FW100
#ffeedd
u-bg-fw100
FW500
#ff8000
u-bg-fw500
FW700
#8f4f0e
u-bg-fw700
FS100
#dcffdc
u-bg-fs100
FS500
#00b400
u-bg-fs500
FS700
#127b12
u-bg-fs700
Text
Aa
N000 - White
#ffffff
u-text-white
Aa
N999 - Black
#111111
u-text-black
Aa
N100
#f6f6f6
u-text-n100
Aa
N200
#e5e5e5
u-text-n200
Aa
N300
#e5e5e5
u-text-n300
Aa
N500
#9a9a9a
u-text-n500
Aa
N700
#6d6d6d
u-text-n700
Aa
N900
#505050
u-text-n900
Aa
P500 - Primary
#1975f0
u-text-p500
Aa
FE500 - Error
#ed1c24
u-text-fe500
Aa
FW500 - Warn
#ff8000
u-text-fw500
Aa
FS500 - Success
#00b400
u-text-fs500
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
Open link
u-aspect-1x1
Multiple properties
u-z-index-1
Multiple properties
u-sr-only
Multiple properties
Screen Reader Only
u-border
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
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