Typography

Fonts

Inter

Headings + Body

Type: Sans Serif

Weights: 400, 700

Source: https://fonts.google.com/specimen/Inter

Headings

H1 Headings

Element

H2 Headings

Element

H3 Headings

Element

H4 Headings

Element

H5 Headings

Element

H6 Headings

Element

Class

Body

p-24

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

p-20

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.

p-14

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

eyebrow

Lorem Ipsum

All Ordered Lists

Example Ordered List
Example Ordered List

All Unordered Lists

Example Unordered List
Example Unordered List

Weights

u-weight-thin

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

u-weight-extralight

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

u-weight-light

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

u-weight-regular

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

u-weight-medium

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

u-weight-semibold

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

u-weight-bold

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

u-weight-extrabold

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

u-weight-black

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

Truncation

Irure deserunt ipsum laborum elit enim. Qui mollit mollit est enim incididunt Lorem consequat ex est consequat veniam id labore. Quis eiusmod deserunt culpa. Fugiat nisi culpa est occaecat.

1 -Line Clamp

u-clamp

Irure deserunt ipsum laborum elit enim. Qui mollit mollit est enim incididunt Lorem consequat ex est consequat veniam id labore. Quis eiusmod deserunt culpa. Fugiat nisi culpa est occaecat.

2-Line Clamp

u-clamp

cc-2

Irure deserunt ipsum laborum elit enim. Qui mollit mollit est enim incididunt Lorem consequat ex est consequat veniam id labore. Quis eiusmod deserunt culpa. Fugiat nisi culpa est occaecat.

3-Line Clamp

u-clamp

cc-3

Text Wrap

Irure deserunt ipsum laborum elit enim. Qui mollit mollit est.

text-wrap: balance;

u-wrap-balance

Balances lines of text. Cannot be used with content greater than 4 lines.

Irure deserunt ipsum laborum elit enim. Qui mollit mollit est.

text-wrap: wrap;

Default Wrap

u-wrap-none

Color

Background

Primary

#0e3aeb

u-bg-primary

Black

#000000

u-bg-black

White

#ffffff

u-bg-white

Text

Primary

#0e3aeb

u-color-primary

Black

#000000

u-color-black

White

#FFFFFF

u-color-white

Components

Buttons

Button

Default

btn

Button

Default + Icon

btn

Button

Secondary

btn

cc-secondary

Button

Secondary + Icon

btn

cc-secondary

Button

Default Light

btn

cc-light

Button

Default Light + Icon

btn

cc-light

Button

Secondary Light

btn

cc-secondary

cc-light

Button

Secondary Light + Icon

btn

cc-secondary

cc-light

Text

Text Link

All Links

Forms

Thank you for your submission!

Oops! Something went wrong while submitting the form.

Images

Default Images

image

Aspect Ratio: Widescreen

16 x 9

u-aspect-widescreen

Aspect Ratio: Landscape

3 x 2

u-aspect-landscape

Aspect Ratio: Square

1 x 1

u-aspect-square

Aspect Ratio: Portrait

2 x 3

u-aspect-portrait

Aspect Ratio: Phonescreen

2 x 3

u-aspect-phonescreen

Card

Default

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

Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote (same font size as paragraph-1.25)

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

Inline code

^Superscript

_Subscript

Heading 1

Heading 2

Heading 3

Heading 4

Block quote (same font size as paragraph-1.25)

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

Inline code

^Superscript

_Subscript

Heading 1

Heading 2

Heading 3

Heading 4

Block quote (same font size as paragraph-1.25)

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

Inline code

^Superscript

_Subscript

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: 1rem;

u-mt-1.25

margin-top: 1.25rem;

u-mt-1.5

margin-top: 1.5rem;

u-mt-2

margin-top: 2rem;

u-mt-2

margin-top: 2.5rem;

u-mt-3

margin-top: 3rem;

u-mt-auto

margin-top: auto;

Bottom

u-mb-0

margin-bottom: 0;

u-mb-1

margin-bottom: 1rem;

u-mb-1.25

margin-bottom: 1.25rem;

u-mb-1.5

margin-bottom: 1.5rem;

u-mb-2

margin-bottom: 2rem;

u-mb-2.5

margin-bottom: 2.5rem;

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

padding-top: 1rem;

u-pt-2

padding-top: 2rem;

u-pt-3

padding-top: 3rem;

Bottom

u-pb-0

padding-bottom: 0;

u-pb-1

padding-bottom: 1rem;

u-pb-2

padding-bottom: 2rem;

u-pb-3

padding-bottom: 3rem;

Other

u-p-0

padding: 0;

u-p-1

padding: 1rem;

Alignment

u-align-left

text-align: left;

u-align-center

text-align: center;

u-align-right

text-align: right;

Overflow

u-overflow-clip

overflow: clip;

u-overflow-visible

overflow: visible;

Display

u-lg-hide

display: none; on Desktop and below.

u-lg-only

Display only on Desktop.

u-md-hide

display: none; on Tablet and below.

u-md-only

Display only on Tablet.

u-sm-hide

display: none; on Mobile Landscape and below.

u-sm-only

Display only on Mobile Landscape.

u-xs-hide

display: none; on Mobile Portrait and below.

u-xs-only

Display only on Mobile Portrait.

u-d-block

display: block;

u-d-flex

display: flex;

u-d-inline-flex

display: inline-flex;

u-d-inline

display: inline

Position

u-p-relative

position: relative;

u-p-absolute

position: absolute;

u-p-absolute

cc-full

position: absolute;
top: 0; bottom: 0; left: 0; right: 0;

u-p-sticky

position: sticky;

u-p-sticky

cc-top

position: sticky;
top: 0;

u-p-sticky

cc-bottom

position: sticky;
bottom: 0;

Flexbox Direction

u-d-flex

cc-horizontal

u-d-flex

cc-vertical

u-d-flex

cc-wrap

Flexbox Gap

u-d-flex

cc-gap-default

u-d-flex

cc-gap-4

u-d-flex

cc-gap-8

u-d-flex

cc-gap-16

u-d-flex

cc-gap-20

u-d-flex

cc-gap-24

u-d-flex

cc-gap-32

u-d-flex

cc-gap-40

u-d-flex

cc-gap-48

u-d-flex

cc-gap-56

Flexbox Alignment Horizontal

u-d-flex

cc-horizontal

cc-left-top

u-d-flex

cc-horizontal

cc-left-center

u-d-flex

cc-horizontal

cc-left-bottom

u-d-flex

cc-horizontal

cc-left-stretch

u-d-flex

cc-horizontal

cc-center-top

u-d-flex

cc-horizontal

cc-center-center

u-d-flex

cc-horizontal

cc-center-bottom

u-d-flex

cc-horizontal

cc-center-stretch

u-d-flex

cc-horizontal

cc-right-top

u-d-flex

cc-horizontal

cc-right-center

u-d-flex

cc-horizontal

cc-right-botom

u-d-flex

cc-horizontal

cc-right-stretch

u-d-flex

cc-horizontal

cc-between-top

u-d-flex

cc-horizontal

cc-between-center

u-d-flex

cc-horizontal

cc-between-bottom

u-d-flex

cc-horizontal

cc-right-stretch

Flexbox Alignment Vertical

u-d-flex

cc-vertical

cc-left-top

u-d-flex

cc-vertical

cc-left-center

u-d-flex

cc-vertical

cc-left-bottom

u-d-flex

cc-vertical

cc-left-stretch

u-d-flex

cc-vertical

cc-center-top

u-d-flex

cc-vertical

cc-center-center

u-d-flex

cc-vertical

cc-center-bottom

u-d-flex

cc-vertical

cc-center-between

u-d-flex

cc-vertical

cc-right-top

u-d-flex

cc-vertical

cc-right-center

u-d-flex

cc-vertical

cc-right-botom

u-d-flex

cc-vertical

cc-right-stretch

u-d-flex

cc-vertical

cc-stretch-top

u-d-flex

cc-vertical

cc-stretch-center

u-d-flex

cc-vertical

cc-stretch-bottom

u-d-flex

cc-vertical

cc-stretch-bottom

Size

u-w-100

width: 100%;

u-h-100

height: 100%;

u-minh-100svh

min-height: 100svh;

Helpers

u-link-cover

Multiple properties

u-z-index-1

Multiple properties

u-sr-only

Multiple properties

u-border

Creates a 100% width, 1px height line.

u-border

cc-vertical

Creates a 100% height, 1px width line.

u-events-none

Sets Events to none.

u-invisible

visibility:hidden
Object takes up room in the DOM and the canvas but is invisible. (Invisible object below)

Invisible object

u-circle

Turns a div into a perfect circle using border radius and aspect ratio (for consistency).

Icons

u-icon

cc-8

Apply to SVG layer on icons. Append combo classes for sizing.

u-icon

cc-16

u-icon

cc-24

u-icon

cc-32

u-icon

cc-40

u-icon

cc-48

Layout

Section

section

Container

container

cc-mw-none

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-center-vertical

col

row

row-bottom

col

Justify columns

row

row-right

col

row

row-center-horizontal

col

row

row-around

col

row

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

Gutterless Column

row

row-no-gutters

col

col-no-gutters

col

col-no-gutters

col

col-no-gutters

col

col-no-gutters