Copy and paste this .page-wrapper

Global default classes

.container + optional .max- add-ons

.container
.max-full
.max-xxlarge
.max-xlarge
.max-large
.max-medium
.max-small
.max-xsmall
.max-xxsmall

Margin - Vertical Equal

.margin-vertical-xsmall
.margin-vertical-small
.margin-vertical-medium
.margin-vertical-large
.margin-vertical-xlarge

Margin - Vertical

.margin-bottom-xsmall
.margin-top-xsmall
.margin-bottom-small
.margin-top-small
.margin-bottom-medium
.margin-top-medium
.margin-bottom-large
.margin-top-large
.margin-bottom-xlarge
.margin-top-xlarge

Tablet bottom add-ons

Tablet top add-ons

.tablet-marg-bottom-small
.tablet-marg-top-small
.tablet-marg-bottom-medium
.tablet-marg-top-medium
.tablet-marg-bottom-large
.tablet-marg-top-large
.tablet-marg-bottom-xlarge
.tablet-marg-top-xlarge

Margin - Horizontal Equal

.margin-horizontal-xsmall
.margin-horizontal-small
.margin-horizontal-medium
.margin-horizontal-large
.margin-horizontal-xlarge

Mobile bottom add-ons

Mobile top add-ons

.mobile-marg-bottom-small
.mobile-marg-top-small
.mobile-marg-bottom-medium
.mobile-marg-top-medium
.mobile-marg-bottom-large
.mobile-marg-top-large
.mobile-marg-bottom-xlarge
.mobile-marg-top-xlarge

Margin - Horizontal

.margin-left-xsmall
.margin-right-xsmall
.margin-left-small
.margin-right-small
.margin-left-medium
.margin-right-medium
.margin-left-large
.margin-right-large
.margin-left-xlarge
.margin-right-xlarge

Tablet left add-ons

Tablet right add-ons

.tablet-marg-left-small
.tablet-marg-right-small
.tablet-marg-left-medium
.tablet-marg-right-medium
.tablet-marg-left-large
.tablet-marg-right-large

Mobile left add-ons

Mobile right add-ons

.mobile-marg-left-small
.mobile-marg-right-small
.mobile-marg-left-medium
.mobile-marg-right-medium
.mobile-marg-left-large
.mobile-marg-right-large

Padding - Equal

.padding-small
.padding-medium
.padding-large
.padding-xlarge
.padding-xsmall
.padding-xsmall

Tablet padding equal add-ons

Mobile padding equal add-ons

.tablet-pad-small
.mobile-pad-small
.tablet-pad-medium
.mobile-pad-medium
.tablet-pad-large
.mobile-pad-large
.tablet-pad-xlarge
.mobile-pad-xlarge

Padding - Vertical equal

.padding-vertical-small
.padding-vertical-medium
.padding-vertical-large
.padding-vertical-xlarge

Tablet padding vertical equal add-ons

Mobile padding vertical equal add-ons

.tablet-pad-vertical-small
.mobile-pad-vertical-small
.tablet-pad-vertical-medium
.mobile-pad-vertical-medium
.tablet-pad-vertical-large
.mobile-pad-vertical-large
.tablet-pad-vertical-xlarge
.mobile-pad-vertical-xlarge

Padding - Horizontal equal

.padding-horizontal-small
.padding-horizontal-xsmall
.padding-horizontal-xxsmall
.padding-horizontal-medium
.padding-horizontal-large
.padding-horizontal-xlarge

Tablet padding vertical equal add-ons

Mobile padding vertical equal add-ons

.tablet-pad-horizontal-small
.mobile-pad-horizontal-small
.tablet-pad-horizontal-medium
.mobile-pad-horizontal-medium
.tablet-pad-horizontal-large
.mobile-pad-horizontal-large

Spacers

.space-xsmall
.space-small
.space-medium
.space-large
.space-xlarge

Margin - Vertical

.margin-bottom-xsmall
.margin-top-xsmall
.margin-bottom-small
.margin-top-small
.margin-bottom-medium
.margin-top-medium
.margin-bottom-large
.margin-top-large
.margin-bottom-xlarge
.margin-top-xlarge

Tablet bottom add-ons

Tablet top add-ons

.tablet-marg-bottom-small
.tablet-marg-top-small
.tablet-marg-bottom-medium
.tablet-marg-top-medium
.tablet-marg-bottom-large
.tablet-marg-top-large
.tablet-marg-bottom-xlarge
.tablet-marg-top-xlarge

Margin - Horizontal Equal

.margin-horizontal-xsmall
.margin-horizontal-small
.margin-horizontal-medium
.margin-horizontal-large
.margin-horizontal-xlarge

Mobile bottom add-ons

Mobile top add-ons

.mobile-marg-bottom-small
.mobile-marg-top-small
.mobile-marg-bottom-medium
.mobile-marg-top-medium
.mobile-marg-bottom-large
.mobile-marg-top-large
.mobile-marg-bottom-xlarge
.mobile-marg-top-xlarge

Typography

Headings & Global body classes

H1

H2

H3

H4

H5
H6
Body text

Paragraph text - 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-italic (click inside Text block to edit HTML tag)
Block Quote

Heading add-ons

.crazy-big-heading

.heading-xxlarge

.heading-xlarge

.heading-large

.heading-medium

.pre-heading

Text

.text-large
.text-small
.text-tiny
.text-strikethrough
.text-white
.text-black
.text-black
.TEXT-CAPS
.text-coloured
.text-background
.text-xbold
.text-bold
.text-semibold
.text-normal
.text-light

Text alignment

.text-left
.text-center
.text-right
.inline (for inline block)

Grids

Grid-1-col

Grid-2-col

Grid-3-col

Grid-4-col

Grid-5-col

Grid-5-col

Grid Alignment

Flex

Flex Alignment

.flex-align-left

.flex-align-center

.flex-align-right

.flex-align-top

.flex-align-middle

.flex-grow

Display block

.block

.block-tablet-mobile

Hide elements

.hide-tablet-mobile

.hide-desktop

Icons

Height

1x1

Other

Link block

.link-block