Typography

Fonts

DM Sans

Headings + Body

Type: Sans Serif

Source: fontshare.com

Headings

H1 Headings

Element

H2 Headings

Element

H3 Headings

Element

H4 Headings

Element

h1

Class

h2

Class

h3

Class

Body

paragraph-1.25

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

paragraph-2

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

paragraph-0.875

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

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

eyebrow

Lorem Ipsum

Color

Background

white bg

#F1F1F1

u-bg-primary

Black

#000000

u-bg-black

Blue

#009BCE

u-bg-gray

Footer black

#3DAF2C

u-bg-footerblack

Text

Aa

Black

#1d1c1a

u-text-black

Aa

Blue

#888680

u-text-midgray

Aa

White

#FFFFFF

u-text-white

Components

Buttons

Button

Default

btn

Learn more

Secondary

btn-second

Text

Text Link

All Links

Button

Default Light

btn

cc-light

Learn more

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

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

position: relative;

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

u-aspect-1x1

Multiple properties

u-z-index-1

Multiple properties

u-sr-only

Multiple properties

u-border

Multiple properties