cell
Typography
Fonts
DM Sans
Body
Type: Sans Serif
Weights: Light (300), Normal (400), Medium (500), Semibold (600), Bold (700)
Source: fonts.google.com/
Raleway
Josefin Sans
Headings
H1 Headings
Element
H2 Headings
Element
H3 Headings
Element
H4 Headings
Element
H5 Headings
Element
H6 Headings
Element
Heading Sizes
h1
4.5 REM
Hello there
h2
3.75 REM
Hello there
h3
3 REM
Hello there
Lorem ipsum
h4
2.25 REM
Hello there
Lorem ipsum
h5
1.875 REM
Hello there
Lorem ipsum
h6
1.5 REM
Hello there
Lorem ipsum
Paragraph Size
XLP
1.375 REM
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
LP
1.25 REM
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
paragraph
1 REM
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
SP
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
XSP
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
title
Raleway Light (300)
Lorem Ipsum
nav-link
Josefin Sans Semibold (600)
eyebrow
Lorem Ipsum
All Ordered Lists
- Example Ordered List
- Example Ordered List
All Unordered Lists
- Example Unordered List
- Example Unordered List
Font Weight
paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Semibold
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Color
Background
Primary
#FF009D
u-bg-primary
Secondary
#F7B029
u-bg-secondary
Tertiary
#98F06A
u-bg-tertiary
Quaternary
#58CCF4
u-bg-quaternary
Darkest Gray
#1d1c1a
u-bg-gray-4
Dark Gray
#302f2c
u-bg-gray-3
Mid Gray
#888680
u-bg-gray-2
Light Gray
#dfddd6
u-bg-gray-1
White
#ffffff
u-bg-white
Text
Aa
Primary
#f7419c
u-text-primary
Aa
Black
#1d1c1a
u-text-black
Aa
Dark Gray
#302f2c
u-text-darkgray
Aa
Mid Gray
#888680
u-text-midgray
Aa
Light Gray
#dfddd6
u-text-lightgray
Aa
White
#FFFFFF
u-text-white
Components
Buttons
Default
btn
Default Wide
btn
cc-wide
Default Light
btn
cc-light
Secondary
btn
cc-secondary
Secondary Wide
btn
cc-secondary
cc-wide
Secondary Light
btn
cc-secondary
cc-light
Small
btn
cc-small
Small
btn
cc-small
u-bg-secondary
u-text-black
Small
btn
cc-small
u-bg-tertiary
u-text-black
Text Link
All Links
Text Link Light
u-text-white
Location
btn
cc-location
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
Utilities
Margin
Top
u-mt-auto
margin-top: auto;
u-mt-0
margin-top: 0;
u-mt-025
margin-top: 0.25em;
u-mt-05
margin-top: 0.5em;
u-mt-1
margin-top: 1em;
u-mt-2
margin-top: 2em;
u-mt-3
margin-top: 3em;
u-mt-4
margin-top: 4em;
u-mt-5
margin-top: 5em;
u-mt-6
margin-top: 6em;
u-mt-7
margin-top: 7em;
u-mt-8
margin-top: 8em;
Bottom
u-mb-auto
margin-bottom: auto;
u-mb-0
margin-bottom: 0;
u-mb-025
margin-bottom: 0.25;
u-mb-05
margin-bottom: 0.5;
u-mb-1
margin-bottom: 1em;
u-mb-2
margin-bottom: 2em;
u-mb-3
margin-bottom: 3em;
u-mb-4
margin-bottom: 4em;
u-mb-5
margin-bottom: 5em;
u-mb-6
margin-bottom: 6em;
u-mb-7
margin-bottom: 7em;
u-mb-8
margin-bottom: 8em;
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-splitter
Multiple properties
Layout
Section
section
Container
container
Grid
cell
cell
cell
cell
cell
cell
cell
cell
cell
cell
cell
cell
cell
cell
cell
cell
cell
cell
cell
cell
Grid (Flexbox Row)
col
col
col
col
col
col
col
col
col
col
Grid (Flexbox Row) - 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 (Flexbox Row) - 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 (Flexbox Row) - 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 (Flexbox Row) - 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