Style Guide

Typography

h1

Heading 1

h2

Heading 2

h3

Heading 3

h4

Heading 4

h5

Heading 5

h6

Heading 6

p-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

p

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

p-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-link
Text Link
button
Button Text
Button Text
eyebrow-header
eyebrow header

Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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
  1. Item 1
  2. Item 2
  3. Item 3
  • Item A
  • Item B
  • Item C

Unordered list

Bold text

Text link

Emphasis

Color

background-black

This is paragraph text

background-olive

This is paragraph text

background-green

This is paragraph text

background-yellow

This is paragraph text

background-cream

This is paragraph text

background-white

This is paragraph text

background-white

This is paragraph text

background-white

This is paragraph text

background-white

This is paragraph text

background-white

This is paragraph text

Flexbox

Horizontal Flex Utilities

h-flex-left-top
h-flex-left-center
h-flex-left-bottom
h-flex-left-stretch
h-flex-center-top
h-flex-center-center
h-flex-center-bottom
h-flex-center-stretch
h-flex-right-top
h-flex-right-center
h-flex-right-bottom
h-flex-right-stretch
h-flex-between-top
h-flex-between-center
h-flex-between-bottom
h-flex-between-stretch

Vertical Flex Utilities

v-flex-left-top
v-flex-left-center
v-flex-left-bottom
v-flex-left-between
v-flex-center-top
v-flex-center-center
v-flex-center-bottom
v-flex-center-between
v-flex-right-top
v-flex-right-center
v-flex-right-bottom
v-flex-right-between
v-flex-stretch-top
v-flex-stretch-center
v-flex-stretch-bottom
v-flex-stretch-between

Other Flex Utilities

h-flex-wrap
v-flex-wrap
flex-shrink
flex-grow
flex-noshrink

Grid

Grid Utilities

grid_3-col
grid_3-col
grid_4-col

Column Utilities

col-1
col-2
col-3
col-4
col-5
col-6
col-7
col-8
col-9
col-10
col-11
col-12

Spacing

spacer-1
spacer-1.5
spacer-2
spacer-2.5
spacer-3
spacer-4
spacer-5