Typography
Fonts
DM Sans
Headings + Body
Type: Sans Serif
Weights: Normal (400), Medium (500)
Headings
H1 Headings
Element
H2 Headings
Element
H3 Headings
Element
H4 Headings
Element
h1
Class
h2
Class
h3
Class
h4
Class
Body
paragraph-1.5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Blockquote
Block Quote
paragraph-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.
paragraph-0.9
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
eyebrow
Lorem Ipsum
Data Large
Lorem Ipsum
Data Large
Lorem Ipsum
All Ordered Lists
- Example Ordered List
- Example Ordered List
All Unordered Lists
- Example Unordered List
- Example Unordered List
Color
Background
Purple
#975a65
u-bg-purple
Dark Blue
#243841
u-bg-dark-blue
Dark Blue Light
#???
u-bg-dark-blue-light
Yellow
#e3ba3c
u-bg-yellow
Green
#64887a
u-bg-green
Green Light
#??
u-bg-green-light
Water
#9cd5c4
u-bg-water
Water Light
#??
u-bg-water-light
Whale
#5a7b83
u-bg-whale
Sand
#e3ded0
u-bg-sand
Sand Light
#??
u-bg-sand-light
Dark 4
rgba(0, 0, 0, 0.8)
u-bg-dark-4
Dark 3
rgba(0, 0, 0, 0.6)
u-bg-dark-3
Dark 2
rgba(0, 0, 0, 0.4)
u-bg-dark-2
Dark 1
rgba(0, 0, 0, 0.2)
u-bg-dark-1
White
#ffffff
u-bg-white
Text
Aa
Green
#64887a
u-text-green
Aa
Green -2
#a2b8af
u-text-green-l2
Aa
Purple
#d14424
u-text-purple
Aa
Dark Blue
#1d1c1a
u-text-dark-blue
Aa
Dark 4
rgba(0, 0, 0, 0.8)
u-text-dark-4
Aa
Dark 3
rgba(0, 0, 0, 0.6)
u-text-dark-3
Aa
Dark 2
rgba(0, 0, 0, 0.4)
u-text-dark-2
Aa
Light 1
#dfddd6
u-text-light-1
Aa
Light 2
#dfddd6
u-text-light-2
Aa
Light 3
#dfddd6
u-text-light-3
Aa
Light 4
#dfddd6
u-text-light-4
Aa
White
#FFFFFF
u-text-white
Components
Buttons
Default
btn
Default + Icon Right
btn
Default + Icon Left
btn
Secondary
btn
cc-secondary
Secondary + Icon Right
btn
cc-secondary
Secondary + Icon Left
btn
cc-secondary
Default Light
btn
cc-light
Default Light + Icon Right
btn
cc-light
Default Light + Icon Left
btn
cc-light
Secondary Light
btn
cc-secondary
cc-light
Secondary Light + Icon Right
btn
cc-secondary
cc-light
Secondary Light + Icon Left
btn
cc-secondary
cc-light
Text Link
All Links
Text Link Light
u-text-white
Link Block + Icon Right
All Links
Circle
btn
cc-circle
Forms
Thank you for your submission!
Oops! Something went wrong while submitting the form.
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.
Prevent Style Clean Up
This is where you can store elements and classes used in custom code to prevent their classes/styles from being cleaned up.
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-d-inline-flex
display: inline-flex;
u-position-relative;
position: relative;
u-position-sticky;
position: sticky;
Size
u-w-100
width: 100%;
u-h-100
height: 100%;
u-minh-100vh
min-height: 100vh;
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