Typography

Fonts

Lato

Headings + Body

Type: Sans Serif
Weights: Normal (400), Bold (700)
Source: googlefonts

Headings

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

Body

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

Swatches

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

Core Background Colors

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

Additional Background Colors

Green

swatch/green
u-bg-green

Yellow

swatch/yellow
u-bg-yellow
Aa

Red

swatch/red
u-bg-red

Core Text Colors

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

Additional Text Colors

Aa

Green

swatch/green
u-text-green
Aa

Yellow

swatch/yellow
u-text-yellow
Aa

Red

swatch/red
u-text-red

Border Colors

Primary

color/border/primary
u-border-primary

Secondary

color/border/secondary
u-border-secondary

Components

Buttons

Button

Default

button
Button

Secondary

button
cc-secondary
Text

Text Link

All Links
Button

Default Light

button
cc-light
Button

Secondary Light

button
cc-secondary
cc-light
Text

Text Link Light

u-text-light

Forms

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.

Card

Default

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

Utilities

Sizing

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

Margin

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;

Padding

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;

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

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

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

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

Prevent Style Clean Up