Style Guide

Typography

h1

Heading 1

h2-large

Heading 2

h2

Heading 2

h3

Heading 3

h4

Heading 4

h5

Heading 5

h6

Heading 6 (not styled)

eyebrow-heading

Eyebrow heading

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

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

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Color

default

This is paragraph text

background-light

This is paragraph text

background-pink

This is paragraph text

background-dark-green

This is paragraph text

background-brown

This is paragraph text

background-beige

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