Typography

Fonts

Manrope

Headings + Body

Type: Sans Serif
Weights: Normal (400), Medium (500), Bold (600)
Source: Google Fonts

Headings

H1 Headings

Element

H2 Headings

Element

H3 Headings

Element

H4 Headings

Element

h1
Class
h2
Class
h3
Class
h4
Class

Body

paragraph-lg

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

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

paragraph-xs

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

eyebrow
Lorem Ipsum
All Ordered Lists
  1. Example Ordered List
  2. Example Ordered List
All Unordered Lists
  • Example Unordered List
  • Example Unordered List

Color

Background

Neutrals 00

#FFFFFF
u-bg-00

Neutrals 01

#FAFAFB
u-bg-01

Neutrals 02

#F2F2F4
u-bg-02

Neutrals 03

#E0E0E2
u-bg-03

Neutrals 04

#C6C6CB
u-bg-04

Neutrals 05

#9B9BA1
u-bg-05

Neutrals 06

#6D6D72
u-bg-06

Neutrals 07

#4A4A54
u-bg-07

Neutrals 08

#2B2B39
u-bg-08

Neutrals 09

#2B2145
u-bg-09

Orange Base

#FF741C
u-bg-orange-base

Orange Light

#FF8830
u-bg-orange-light

Orange Dark

#E15600
u-bg-orange-dark

Purple Base

#B72378
u-bg-purple-base

Purple Light

#CB378C
u-bg-purple-light

Purple Dark

#99055A
u-bg-purple-dark

Green Base

#28C88B
u-bg-green-base

Green Light

#3CDC9F
u-bg-green-light

Green Dark

#14B477
u-bg-green-dark

Blue Base

#3F5CDC
u-bg-blue-base

Blue Light

#5D7AFA
u-bg-blue-light

Blue Dark

#1734B4
u-bg-blue-dark

Orange Gradient

#1734B4
u-bg-orange-gradient

Dark Gradient

#1734B4
u-bg-dark-gradient

Light Gradient

#1734B4
u-bg-light-gradient

Text

Aa

Neutrals 00

#FFFFFF
u-text-00

Aa

Neutrals 01

#FAFAFB
u-text-01

Aa

Neutrals 02

#F2F2F4
u-text-02

Aa

Neutrals 03

#E0E0E2
u-text-03

Aa

Neutrals 04

#C6C6CB
u-text-04

Aa

Neutrals 05

#9B9BA1
u-text-05

Aa

Neutrals 06

#6D6D72
u-text-06

Aa

Neutrals 07

#4A4A54
u-text-07

Aa

Neutrals 08

#2B2B39
u-text-08

Aa

Neutrals 09

#2B2145
u-text-09

Aa

Orange Base

#FF741C
u-text-orange-base

Aa

Orange Light

#FF8830
u-text-orange-light

Aa

Orange Dark

#E15600
u-text-orange-dark

Aa

Purple Base

#B72378
u-text-purple-base

Aa

Purple Light

#CB378C
u-text-purple-light

Aa

Purple Dark

#99055A
u-text-purple-dark

Aa

Green Base

#28C88B
u-text-green-base

Aa

Green Light

#3CDC9F
u-text-green-light

Aa

Green Dark

#14B477
u-text-green-dark

Aa

Blue Base

#3F5CDC
u-text-blue-base

Aa

Blue Light

#5D7AFA
u-text-blue-light

Aa

Blue Dark

#1734B4
u-text-blue-dark

Components

Buttons

Link Title

Button

btn

Forms

Thank you for your submission!

Oops! Something went wrong while submitting the form.

Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida tellus ante, a euismod urna posuere in.

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.

Image caption here
Block quote (same font size as paragraph-1.25)

Ordered list

  1. Item 1
  2. Item 2
  3. 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

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.

Image caption here
Block quote (same font size as paragraph-1.25)

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Inline code

Superscript

Subscript

Prevent Style Clean Up

u-d-flex u-flex-vert
u-d-flex u-flex-vert
u-d-flex u-flex-vert
u-d-flex u-flex-vert
u-d-flex u-flex-vert cc-gap-0.5
u-d-flex u-flex-vert cc-gap-0.5
u-d-flex u-flex-vert cc-gap-0.5
u-d-flex u-flex-vert cc-gap-0.5
u-d-flex u-flex-vert cc-gap-1
u-d-flex u-flex-vert cc-gap-1
u-d-flex u-flex-vert cc-gap-1
u-d-flex u-flex-vert cc-gap-1
u-d-flex u-flex-vert cc-gap-1.5
u-d-flex u-flex-vert cc-gap-1.5
u-d-flex u-flex-vert cc-gap-1.5
u-d-flex u-flex-vert cc-gap-1.5
u-d-flex u-flex-vert cc-gap-2
u-d-flex u-flex-vert cc-gap-2
u-d-flex u-flex-vert cc-gap-2
u-d-flex u-flex-vert cc-gap-2
u-d-flex u-flex-vert cc-gap-2.5
u-d-flex u-flex-vert cc-gap-2.5
u-d-flex u-flex-vert cc-gap-2.5
u-d-flex u-flex-vert cc-gap-2.5

Utilities

Margin

Top

u-mt-0
margin-top: 0;
u-mt-1
margin-top: 1rem;
u-mt-2
margin-top: 2rem;
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-2
margin-bottom: 2rem;
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;
u-pb-5
padding-bottom: 5rem;
u-pb-7.5
padding-bottom: 7.5rem;
u-pb-15
padding-bottom: 15rem;

Other

u-p-0
padding: 0;
u-p-1
padding: 1rem;

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

Grid

col
col
col
col
col
col
col
col
col
col
col-lg
col-lg
col-xl
col-xl

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