Style Guide

Font Styling

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

Uppercase Text [class="caps"]

Underlined Text [class="underline"]

Text align left [class="text--left"]

Text align right [class="text--right"]

Text align center [class="text--center"]

Text that's bigger than normal size (16px) [class="text--big"]

Text that's bigger than normal size (18px) [class="text--bigger"]

Text that's smaller than normal size (12px) [class="text--small"]

Text that's smaller than normal size (10px) [class="text--smaller"]

Proxima Nova Light text [class="weight--light"]

Proxima Nova Regular text [class="weight--normal"]

Proxima Nova Bold text [class="weight--bold"]

Red text [class="text--red"]

Black text [class="text--black"]

Link Styling

Normal Link

Gray Link [class="link--gray"]

Primary Button [class="button button--primary"]

Secondary Button [class="button button--secondary"]

Pay Button [class="button button--pay"]

Rows

[class="row--dark-gray"]
[class="row--medium-gray"]
[class="row--light-gray"]
[class="row--gray-texture"]
[class="row--red"]
[class="row--white"]
[class="row--tan"]
[class="row--light-blue"]

Grid

Wrap a section of grids in a container with a class="grid"

One Whole [class="grid__item one-whole"]
One Half [class="grid__item one-half"]
One Half [class="grid__item one-half"]
Two Thirds [class="grid__item two-thirds"]
One Quarter [class="grid__item one-quarter"]
Three Quarters [class="grid__item three-quarters"]
One Fifth [class="grid__item one-fifth"]
Four Fifths [class="grid__item four-fifths"]
Two Fifths [class="grid__item two-fifths"]
Three Fifths [class="grid__item three-fifths"]

And so on…

Moving Grid Elements

Styling to move grid items over to the right (push) or left (pull) by certain amounts.

Three Fifths pushed two fifths to the right
[class="grid__item three-fifths push--two-fifths"]
Two Fifths
Three Fifths pulled two fifths to the left
[class="grid__item three-fifths pull--two-fifths"]

Margin

.push { margin: 24px!important; }
.push--top { margin-top: 24px!important; }
.push--right { margin-right: 24px!important; }
.push--bottom { margin-bottom:24px!important; }
.push--left { margin-left: 24px!important; }
.push--ends { margin-top: 24px!important; margin-bottom:24px!important; }
.push--sides { margin-right: 24px!important; margin-left: 24px!important; }

.push-half { margin: 12px!important; }
.push-half--top { margin-top: 12px!important; }
.push-half--right { margin-right: 12px!important; }
.push-half--bottom { margin-bottom:12px!important; }
.push-half--left { margin-left: 12px!important; }
.push-half--ends { margin-top: 12px!important; margin-bottom:12px!important; }
.push-half--sides { margin-right: 12px!important; margin-left: 12px!important; }

.push-one-and-half { margin: 36px!important; }
.push-one-and-half--top { margin-top: 36px!important; }
.push-one-and-half--right { margin-right: 36px!important; }
.push-one-and-half--bottom { margin-bottom:36px!important; }
.push-one-and-half--left { margin-left: 36px!important; }
.push-one-and-half--ends { margin-top: 36px!important; margin-bottom:36px!important; }
.push-one-and-half--sides { margin-right: 36px!important; margin-left: 36px!important; }

.push-double { margin: 48px!important; }
.push-double--top { margin-top: 48px!important; }
.push-double--right { margin-right: 48px!important; }
.push-double--bottom { margin-bottom:48px!important; }
.push-double--left { margin-left: 48px!important; }
.push-double--ends { margin-top: 48px!important; margin-bottom:48px!important; }
.push-double--sides { margin-right: 48px!important; margin-left: 48px!important; }

.push-triple { margin: 72px!important; }
.push-triple--top { margin-top: 72px!important; }
.push-triple--right { margin-right: 72px!important; }
.push-triple--bottom { margin-bottom:72px!important; }
.push-triple--left { margin-left: 72px!important; }
.push-triple--ends { margin-top: 72px!important; margin-bottom:72px!important; }
.push-triple--sides { margin-right: 72px!important; margin-left: 72px!important; }

.flush { margin: 0!important; }
.flush--top { margin-top: 0!important; }
.flush--right { margin-right: 0!important; }
.flush--bottom { margin-bottom:0!important; }
.flush--left { margin-left: 0!important; }
.flush--ends { margin-top: 0!important; margin-bottom:0!important; }
.flush--sides { margin-right: 0!important; margin-left: 0!important; }

Padding

.soft { padding: 24px!important; }
.soft--top { padding-top: 24px!important; }
.soft--right { padding-right: 24px!important; }
.soft--bottom { padding-bottom:24px!important; }
.soft--left { padding-left: 24px!important; }
.soft--ends { padding-top: 24px!important; padding-bottom:24px!important; }
.soft--sides { padding-right: 24px!important; padding-left: 24px!important; }

.soft-half { padding: 12px!important; }
.soft-half--top { padding-top: 12px!important; }
.soft-half--right { padding-right: 12px!important; }
.soft-half--bottom { padding-bottom:12px!important; }
.soft-half--left { padding-left: 12px!important; }
.soft-half--ends { padding-top: 12px!important; padding-bottom:12px!important; }
.soft-half--sides { padding-right: 12px!important; padding-left: 12px!important; }

.soft-one-and-half { padding: 36px!important; }
.soft-one-and-half--top { padding-top: 36px!important; }
.soft-one-and-half--right { padding-right: 36px!important; }
.soft-one-and-half--bottom { padding-bottom:36px!important; }
.soft-one-and-half--left { padding-left: 36px!important; }
.soft-one-and-half--ends { padding-top: 36px!important; padding-bottom:36px!important; }
.soft-one-and-half--sides { padding-right: 36px!important; padding-left: 36px!important; }

.soft-double { padding: 48px!important; }
.soft-double--top { padding-top: 48px!important; }
.soft-double--right { padding-right: 48px!important; }
.soft-double--bottom { padding-bottom:48px!important; }
.soft-double--left { padding-left: 48px!important; }
.soft-double--ends { padding-top: 48px!important; padding-bottom:48px!important; }
.soft-double--sides { padding-right: 48px!important; padding-left: 48px!important; }

.soft-triple { padding: 72px!important; }
.soft-triple--top { padding-top: 72px!important; }
.soft-triple--right { padding-right: 72px!important; }
.soft-triple--bottom { padding-bottom:72px!important; }
.soft-triple--left { padding-left: 72px!important; }
.soft-triple--ends { padding-top: 72px!important; padding-bottom:72px!important; }
.soft-triple--sides { padding-right: 72px!important; padding-left: 72px!important; }

.hard { padding: 0!important; }
.hard--top { padding-top: 0!important; }
.hard--right { padding-right: 0!important; }
.hard--bottom { padding-bottom:0!important; }
.hard--left { padding-left: 0!important; }
.hard--ends { padding-top: 0!important; padding-bottom:0!important; }
.hard--sides { padding-right: 0!important; padding-left: 0!important; }

Accreditations: