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

paragraph

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

paragraph-small

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

Justified Text

justified-text-x-large

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

justified-text-large

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

justified-text-medium

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

justified-text-small

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

Miscellaneous

eyebrow

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

Surface

#1d1c1a

u-bg-surface

Surface hover

#302f2c

u-bg-surface-hover

Surface brand

#888680

u-bg-surface-brand

Inverse

#dfddd6

u-bg-inverse

Text

Primary

#d14424

u-text-primary

Primary

#d14424

u-text-secondry

Text hover

#1d1c1a

u-text-hover

Text hover 2

#302f2c

u-text-hover--2

Text disabled

#888680

u-text-disabled

Light Gray

#dfddd6

u-text-brand-on-bg-fill

White

#FFFFFF

u-text-brand-on-bg-fill-hover

White

#FFFFFF

u-text-brand-on-bg-fill-disabled

Border

Primary

#d14424

u-text-primary

Text hover

#1d1c1a

u-text-hover

Text hover 2

#302f2c

u-text-hover--2

Text disabled

#888680

u-text-disabled

Light Gray

#dfddd6

u-text-brand-on-bg-fill

White

#FFFFFF

u-text-brand-on-bg-fill-hover

White

#FFFFFF

u-text-brand-on-bg-fill-disabled

Components

Buttons

Link Text Goes Here

Default

btn

Link Text Goes Here

Default + Icon Right

btn

Link Text Goes Here

Default + Icon Left

btn

Link Text Goes Here

Default selected

btn

Link Text Goes Here

Default Light

btn

cc-light

Link Text Goes Here

Default Light + Icon Right

btn

cc-light

Link Text Goes Here

Default Light + Icon Left

btn

cc-light

Link Text Goes Here

Secondary

btn

cc-secondary

Link Text Goes Here

Secondary + Icon Right

btn

cc-secondary

Link Text Goes Here

Secondary + Icon Left

btn

cc-secondary

Link Text Goes Here

Secondary Light

btn

cc-secondary

cc-light

Link Text Goes Here

Secondary Light + Icon Right

btn

cc-secondary

cc-light

Link Text Goes Here

Secondary Light + Icon Left

btn

cc-secondary

cc-light

Pill Text

Default with icon

btn

cc-with-icon

Pill Text

Default with icon

btn

cc-with-icon

Pill Text

Default with icon

btn

cc-with-icon

Pill Text

Default with icon

btn

cc-with-icon

cc-light

Pill Text

Default with icon

btn

cc-with-icon

cc-light

Pill Text

Default with icon

btn

cc-with-icon

cc-light

Text

All links

All Links

Link Text Goes Here

Link Default

link

Link Text Goes Here

Link Default

link

Link Text

Link Default

link

link--large

Link Text Goes Here

Link Light

link

cc-light

Link Text Goes Here

Link Light

link

cc-light

Link Text

Link Light

link

link--large

cc-light

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.

Accordions

title here

Microneedling is a minimally invasive procedure that uses fine needles to create tiny punctures in the skin, stimulating collagen and elastin production for improved skin texture and tone.

title here

Microneedling is a minimally invasive procedure that uses fine needles to create tiny punctures in the skin, stimulating collagen and elastin production for improved skin texture and tone.

title here

Microneedling is a minimally invasive procedure that uses fine needles to create tiny punctures in the skin, stimulating collagen and elastin production for improved skin texture and tone.

title here

Microneedling is a minimally invasive procedure that uses fine needles to create tiny punctures in the skin, stimulating collagen and elastin production for improved skin texture and tone.

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

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

u-mt-1.5

margin-top: 1.5em;

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

margin-top: auto;

Bottom

u-mb-0

margin-bottom: 0;

u-mb-1

margin-bottom: 1em;

u-mb-1.5

margin-bottom: 1.5em;

u-mb-2

margin-bottom: 2em;

u-mb-2.5

margin-bottom: 2.5em;

u-mb-3

margin-bottom: 3em;

u-mb-5

margin-bottom: 5em;

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;

u-p-section--small

section-padding: 5rem;

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-d-inline-flex

display: inline-flex;

u-position-relative;

position: relative;

u-position-sticky;

position: sticky;

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

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

Gutterless Column

row

row-no-gutters

col

col-no-gutters

col

col-no-gutters

col

col-no-gutters

col

col-no-gutters