Typography

Fonts

General Sans

Headings + Body

Type: Sans Serif

Weights: Normal (400), Medium (500)

Source: fontshare.com

Headings

H1 Headings

Element

H2 Headings

Element

H3 Headings

Element

H4 Headings

Element

Class

Body

textSize2

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

textSize1.85

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

textSize1.5

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

textSize1

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

textSize0.875

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

textSize0.8

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

textSize0.75

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

body1

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

body2

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.

caption

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

overline

Lorem Ipsum

All Ordered Lists

Example Ordered List
Example Ordered List

All Unordered Lists

Example Unordered List
Example Unordered List

Color

Background

Primary

#d14424

u-bg-primary

Black

#1d1c1a

u-bg-black

Dark Gray

#302f2c

u-bg-darkgray

Mid Gray

#888680

u-bg-midgray

Light Gray

#dfddd6

u-bg-lightgray

White

#ffffff

u-bg-white

Green

#C2EBD9

u-bg-green

Dark Green

#005A46

u-bg-dark-green

Delft Blue

#333973

u-bg-delft-blue

Yellow

#FAF5E7

u-bg-yellow

Gunmetal

#282C34

u-bg-gunmetal

Vanilla

#FFE7A8

u-bg-vanilla

Light Purple

#C5CBFF

u-bg-light-purple

Anti-Flash White

#F2F4F6

u-bg-antiflash-white

Silver

#B6B6B6

u-bg-silver

Jasmine

#FFDD85

u-bg-jasmine

Light Cyan

#c2f3ff

u-bg-light-cyan

Saffron

#f2bd33

u-bg-saffron

Text

Text Primary

#282828

u-text-primary

Secondary

#d14424

u-text-primary

Dark Teal

#00819d

u-text-dark-teal

Black

#1d1c1a

u-text-black

Raisin Black

#282828

u-text-raisin-black

Dim Gray

#6D6D6D

u-text-raisin-black

Dark Gray

#302f2c

u-text-darkgray

Mid Gray

#888680

u-text-midgray

Purple Text

#34396e

u-text-purple-text

Blue Text

#38afc1

u-text-blue-text

Light Gray

#dfddd6

u-text-lightgray

White

#FFFFFF

u-text-white

Battleship Gray

#999

u-text-battleship-gray

Components

Buttons

Button

Contained

btn-contained

Button

Outlined

btn-outlined

Button

Outlined

btn-outlined

Text

Text Link

All Links

Button

Default Light

btn

cc-light

Button

Secondary Light

btn

cc-secondary

cc-light

Text

Text Link Light

u-text-white

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

Tabs indicator

tabs-indicator

Span offset

scroll-to

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

margin-bottom: 0.5em;

u-mb-0.75

margin-bottom: 0.75em;

u-mb-1

margin-bottom: 1em;

u-mb-1.5

margin-bottom: 1.5em;

u-mb-2

margin-bottom: 2em;

u-mb-3

margin-bottom: 3em;

u-mb-4

margin-bottom: 4em;

Other

u-m-0

margin: 0;

u-mlr-auto

margin: 0 auto; (centers element))

u-mr-0.5

margin-right: 0.5em;

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

u-aspect-1x1

Multiple properties

u-z-index-1

Multiple properties

u-sr-only

Multiple properties

u-border

Multiple properties

u-3d-frame

Multiple properties

Layout

Section

section

Container

container

Grid

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

row

row-align-end

col

Justify columns

row

row-justify-end

col

row

row-justify-center

col

row

row-justify-around

col

row

row-justify-between

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

col-sm-shrink

col

Gutterless Column

row

row-no-gutters

col

col-no-gutters

col

col-no-gutters

col

col-no-gutters

col

col-no-gutters