Typography

Fonts

Untitled
Serif

Headings

Weights: Normal (400), Medium (500)

Untitled
Sans

Headings + Body

Weights: Normal (400), Medium (500)

Pitch
Sans

Accent

Weights: Normal (400), Medium (500)

Headings

H1 Headings

Element

H2 Headings

Element

H3 Headings

Element

H4 Headings

Element

H5 Headings
Element
H6 Headings
Element
h1
Class
h2
Class
h3
Class
h4
Class
h5
Class
h6
Class

Body

paragraph-1.875

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

paragraph-1.45

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.

quote-large

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

quote

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

All Ordered Lists
  1. Example Ordered List
  2. Example Ordered List
All Unordered Lists
  • Example Unordered List
  • Example Unordered List

Color

Background

Accent

Violet

#6733FF
u-bg_violet

Dark Violet

#202080
u-bg_dark-violet

Light Violet

#C7BAFF
u-bg_light-violet

BG Violet

#F8F7FF
u-bg_bg-violet

Blue

#1C8AFF
u-bg_blue

Dark Blue

#003175
u-bg_dark-blue

Light Blue

#87D9FF
u-bg_light-blue

BG Blue

#F2FAFF
u-bg_bg-blue

Red

#F2461B
u-bg_red

Dark Red

#8A2511
u-bg_dark-red

Light Red

#FFDAC4
u-bg_light-red

BG Red

#FFF5F1
u-bg_bg-red

Green

#1CB03B
u-bg_green

Dark Green

#0E612C
u-bg_dark-green

Light Green

#C3F7C9
u-bg_light-green

BG Green

#F0FDF2
u-bg_bg-green

Lime

#A9CC0E
u-bg_lime

Dark Lime

#4B7000
u-bg_dark-lime

Light Lime

#DEF296
u-bg_light-lime

BG Lime

#F6FDE4
u-bg_bg-lime

Yellow

#F5C345
u-bg_yellow

Dark Yellow

#BD6604
u-bg_dark-yellow

Light Yellow

#FFE48C
u-bg_light-yellow

BG Yellow

#FFF9E3
u-bg_bg-yellow

Neutral

Black

#000000
u-bg_black

Dark Gray

#3F4245
u-bg_dark-gray

Medium Gray

#73777A
u-bg_medium-gray

Light Gray

#DFE3E5
u-bg_light-gray

BG Gray

#F6F8FA
u-bg_bg-gray

White

#FFFFFF
u-bg_white

Text

Aa

Black

#000000
u-text_black
Aa

Medium Gray

#73777A
u-text_black
Aa

White

#FFFFFF
u-text_white
Aa

Violet

#6733FF
u-text_violet
Aa

Green

#1cb03b
u-text_green

Components

Buttons

Get pricing

Primary

btn
Go here

Primary - Icon Right

btn
cc-icon
Watch demo

Primary - Icon Left

btn
cc-icon
Get pricing

Primary

btn
cc-white
Go here

Primary - Icon Right

btn
cc-white
cc-icon
Watch demo

Primary - Icon Left

btn
cc-white
cc-icon
Get pricing

Secondary

btn
cc-secondary
Go here
Go here

Secondary - Icon Right

btn
cc-icon
cc-secondary
Watch demo
Watch demo

Secondary - Icon Left

btn
cc-icon
cc-secondary
Get pricing

Secondary

btn
cc-secondary
cc-white
Go here

Secondary - Icon Right

btn
cc-icon
cc-secondary
cc-white
Watch demo

Secondary - Icon Left

btn
cc-icon
cc-secondary
cc-white

Other

Get pricing

Brand Color

btn
cc-brand-color

Buttons - Finsweet

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Radio Buttons

resource-filter
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Checkboxes

resource-filter

Forms

*Required

Thank you for your submission!

Oops! Something went wrong while submitting the form.
* Required

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 some text inside of a div block.
roles-sticky_link
us-map_tooltip-wrapper
cc-show
incentive-map_search-results-wrapper
cc-show
This is some text inside of a div block.
u-text-lowercase

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Blog embed cards

Free Resource

Find out how the best productions stay on budget and on time.

CTA Text

Blog Ads

Free Resource

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Cta text

Blog Ads

Free Template

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Cta text

Blog Ads

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-05
margin-right: 0.5em;
u-mr-1
margin-right: 1em;
u-mr-2
margin-right: 2em;
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-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