Style Guide

Typography

HTML Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading Size Variations

Heading XXL

Heading XL

Heading Large

Heading Medium

Heading Small

Heading XSmall

Heading XXSmall

Eyebrow heading

Text Size Variations

A 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.

Rich Text Elements

Content Rich Text

Heading 1

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

Heading 2

A 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.

Heading 3

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A 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.

Heading 4

Heading 5

Policy Rich Text

Heading 1

Heading 2

Heading 3

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading 4

Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Heading 5

Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Text Weights

text-weight-bold

text-weight-medium

text-weight-normal

text-weight-light

Text Alignment

text-align-left

text-align-center

text-align-right

Text Colors

text-color-black

text-color-white

text-color-green

text-color-grey

text-color-recipe-blue

text-color-recipe-bright

Colors

Color Swatches

black
#000000

white
#FFFFFF

DEEP BLUE SEA
#1D4453

BREEZE
#F5F9FA

WET SAND
#B8A66A

LINEN
#F9F6EF

OCEAN
#356679#30364d

GOLDEN BROWN
#7E6F39

SAND
#DCD0A9

MIST
#F2F2F2

IRON
#434343

Background Colors

.background-color-white

.background-color-blue-sea

.background-color-mist

.background-color-breeze

.background-color-linen

UI Elements

Button Sizes

button button-secondary button-tertiary button.button-small button-secondary.button-small button-tertiary.button-small

Form Elements

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Icons

.icon-xsmall

.icon-small

.icon-medium

.icon-large

Divider Lines

line-light

line-dark

Border Box (Radius & Shadows)

border-box.white

border-box.dark

Accordion Interactions (FAQ, meez Story, etc)

accordion-item

Spacing & Layout

Container Widths

.container (no max width)

.container-large

.container-medium

.container-small

Padding Direction

.padding-top

.padding-bottom

.padding-left

.padding-right

.padding-horizontal

.padding-vertical

Padding Size

.padding-0

.padding-tiny

.padding-xxsmall

.padding-xsmall

.padding-small

.padding-medium

.padding-large

.padding-xlarge

.padding-xxlarge

.padding-huge

Margin Size

.margin-0

.margin-tiny

.margin-xxsmall

.margin-xsmall

.margin-small

.margin-medium

.margin-large

.margin-xlarge

.margin-xxlarge

Margin Direction

.margin-top

.margin-bottom

.margin-left

.margin-right

.margin-horizontal

.margin-vertical

Responsiveness (these don't work yet)

.hide - hide on all devices

.hide-tablet - hide starting from tablet resolution

.hide-mobile-landscape - hide starting from mobile landscape resolution

.hide-mobile-portrait - hide starting from mobile portrait resolution

.show - display on all devices

.show-tablet - display starting from tablet resolution

.show-mobile-landscape - display starting from mobile landscape resolution

.show-mobile-portrait - display starting from mobile portrait resolution

Exceptions & Misc Styles

.100vh-min - will make the minimum height 100vh, for full-height pages with 1 offer (ex. the referral page)

.sticky-wrap - div with position:sticky. Sticks top at 100px (below nav); used for aside-menus (ex. press and partnership page)

.box-shadow - add to divs, box borders and images for consistent box shadow (rgba(48, 54, 77, 0.2)

Max-widths

.max-width-full

.max-width-full-tablet

.max-width-full-mobile-landscape

max-width-full-mobile-portrait

.max-width-xxsmall

.max-width-xsmall

.max-width-small

.max-width-medium

.max-width-large

.max-width-xlarge

.max-width-xxlarge

Section Layouts

2 Column Grids

2-column-grid

1:1 ratio, 6rem spacing

3-column-grid

1:1:1 ratio

3rem spacing

4-column-grid

1:1:1 ratio

1.5rem spacing

Ex. Checkmark bar

2 Column Add-On Classes

.left-large

1:0.75 ratio, 6rem spacing

.right-large

0.75:1 ratio, 6rem spacing

.right-larger

0.5:1 ratio, 6rem spacing

.right-largest

0.25:1 ratio, 6rem spacing

List / Bullet Grids

3-column-grid-list