Style Guide

Typography

h1

Heading 1

h2

Heading 2

h3

Heading 3 (not styled)

h4

Heading 4 (not styled)

h5

Heading 5 (not styled)

h6

Heading 6 (not styled)

eyebrow-text
This is eyebrow text
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. (not styled)

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. (not styled)

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

background-black

This is paragraph text

background-brown

This is paragraph text

background-blue

This is paragraph text

background-green

This is paragraph text

background-yellow

This is paragraph text

background-yellow

This is paragraph text

background-yellow

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

Style Guide

Typography

h1

Heading 1

h2

Heading 2

h3

Heading 3 (not styled)

h4

Heading 4 (not styled)

h5

Heading 5 (not styled)

h6

Heading 6 (not styled)

eyebrow-text
This is eyebrow text
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. (not styled)

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. (not styled)

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

background-black

This is paragraph text

background-brown

This is paragraph text

background-blue

This is paragraph text

background-green

This is paragraph text

background-yellow

This is paragraph text

background-yellow

This is paragraph text

background-yellow

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