Typography

Lato

Headings + Body

Type: Sans Serif
Weights: Normal (400), Bold (700)
Source: googlefonts
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
u-text-size-1.5

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

u-text-size-1.25

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.

u-text-size-0.9

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
All Block Quotes
Block Quote

Colors

Blue

#1653f1
swatch / main blue

Green

#3cba58
swatch / green

Yellow

#ffb400
swatch /yellow

Red

#da2424
swatch / red

Black

#000000
swatch / black

Grey 6

#10243B
swatch / grey 6

Grey 5

#3D5469
swatch / grey 5

Grey 4

#7D94A8
swatch / grey 4

Grey 3

#B8C5CF
swatch / grey 3

Grey 2

#DEE5EC
swatch / grey 2

Grey 1

#F6F7F9
swatch / grey 1

White

#ffffff
swatch / white

Primary

color/background/secondary
u-bg-primary

Secondary

color/background/secondary
u-bg-secondary

Alternate

color/background/dark
u-bg-dark

Accent Primary

color/background/accent
u-bg-accent

Green

swatch/green
u-bg-green

Yellow

swatch/yellow
u-bg-yellow
Aa

Red

swatch/red
u-bg-red
Aa

Primary

color/text/primary
u-text-primary
Aa

Secondary

color/text/secondary
u-text-secondary
Aa

Alternate Primary

color/text/light-primary
u-text-light
Aa

Alternate Secondary

color/text/light-secondary
u-text-light-secondary
Aa

Accent

color/text/accent
u-text-accent
Aa

Green

swatch/green
u-text-green
Aa

Yellow

swatch/yellow
u-text-yellow
Aa

Red

swatch/red
u-text-red

Primary

color/border/primary
u-border-primary

Secondary

color/border/secondary
u-border-secondary

Components

Default

button

Secondary

button
cc-secondary

Text Link

All Links

Default Light

button
cc-light

Secondary Light

button
cc-secondary
cc-light

Text Link Light

u-text-light
Select your options
*Required

Thank you for your submission!

Oops! Something went wrong while submitting the form.
*Required

Thank you for your submission!

Oops! Something went wrong while submitting the form.

Default

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

Utilities

size0.25
size0.5
size0.75
size1
size1.25
size1.5
size1.75
size2
size2.5
size3
size3.5
size4
size4.5
size5
size6
size7
size8
size9
size10
size11
size12
size13
size14
size15
size16
size17
size18
size19
size20

Top

u-mt-0
margin-top: 0;
u-mt-.5
margin-top: .5rem;
u-mt-1
margin-top: 1rem;
u-mt-1.5
margin-top: 1.5rem;
u-mt-2
margin-top: 2rem;
u-mt-3
margin-top: 3rem;
u-mt-auto
margin-top: auto;

Bottom

u-mb-0
margin-bottom: 0;
u-mb-.5
margin-bottom: .5rem;
u-mb-1
margin-bottom: 1rem;
u-mb-1.5
margin-bottom: 1rem;
u-mb-2
margin-bottom: 2rem;
u-mb-3
margin-bottom: 3rem;

Other

u-m-0
margin: 0;
u-mlr-auto
margin: 0 auto; (centers element))
u-mr-1
margin-right: 1rem;
u-ml-1
margin-left: 1rem;

Top

u-pt-0
padding-top: 0;
u-pt-.5
padding-top: .5rem;
u-pt-1
padding-top: 1rem;
u-pt-1.5
padding-top: 1.5rem;
u-pt-2
padding-top: 2rem;
u-pt-3
padding-top: 3rem;

Bottom

u-pb-0
padding-bottom: 0;
u-pb-.5
padding-bottom: .5em;
u-pb-1
padding-bottom: 1rem;
u-pb-1.5
padding-bottom: 1.5rem;
u-pb-2
padding-bottom: 2rem;
u-pb-3
padding-bottom: 3rem;

Other

u-p-0
padding: 0;
u-p-.5
padding: .5rem;
u-p-1
padding: 1rem;
u-text-center
text-align: center;
u-text-right
text-align: right;
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-position-relative;
position: relative;
u-hide
display: none;
u-hide-tablet
display: none, on tablet
u-hide-landscape
display: none, on mobile landscape
u-hide-portrait
display: none, on mobile portrait
u-w-100
width: 100%;
u-h-100
height: 100%;
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

Sections are given a default top and bottom spacing using the global code embed (equal to cc-p-2) but they can be overwritten using any of the following combo classes. cc-p-1 will give the section smaller spacing, and cc-p-3 will give it larger spacing. Top control top and bottom spacing individually use pt and pb (Padding top and padding bottom) instead of p.

*Important: Do not manually update the spacing values for any of these combo classes, if a different spacing amount is needed use a unique combo class, eg cc-home-header.

section
section
cc-small
section
cc-large
section
cc-top-large
cc-bottom-small
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-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

Shrink Column

col
col-shrink
col

Gutterless Column

row
row-gutterless
col
col-gutterless
col
col-gutterless
col
col-gutterless
col
col-gutterless