12 Column Grid - Desktop

A 12 column layout system using flexbox. The grid consists of a grid container followed by grid items of different width percentages.

Grid Item 12
Grid Item 11
Grid Item 10
Grid Item 9
Grid Item 8
Grid Item 7
Grid Item 6
Grid Item 5
Grid Item 4
Grid Item 3
Grid Item 2
Grid Item 1

12 Column Grid - Tablet

Add these classes in order to change the column width on Tablet devices and below.

Grid Item 12 Tablet
Grid Item 11 Tablet
Grid Item 10 Tablet
Grid Item 9 Tablet
Grid Item 8 Tablet
Grid Item 7 Tablet
Grid Item 6 Tablet
Grid Item 5 Tablet
Grid Item 4 Tablet
Grid Item 3 Tablet
Grid Item 2 Tablet
Grid Item 1 Tablet

12 Column Grid - Mobile Landscape

Add these classes in order to change the column width on Mobile Landscape devices and below.

Grid Item 12 Mobile Landscape
Grid Item 11 Mobile Landscape
Grid Item 10 Mobile Landscape
Grid Item 9 Mobile Landscape
Grid Item 8 Mobile Landscape
Grid Item 7 Mobile Landscape
Grid Item 6 Mobile Landscape
Grid Item 5 Mobile Landscape
Grid Item 4 Mobile Landscape
Grid Item 3 Mobile Landscape
Grid Item 2 Mobile Landscape
Grid Item 1 Mobile Landscape

12 Column Grid - Mobile

Add these classes in order to change the column width on Mobile devices and below.

Grid Item 12 Mobile
Grid Item 11 Mobile
Grid Item 10 Mobile
Grid Item 9 Mobile
Grid Item 8 Mobile
Grid Item 7 Mobile
Grid Item 6 Mobile
Grid Item 5 Mobile
Grid Item 4 Mobile
Grid Item 3 Mobile
Grid Item 2 Mobile
Grid Item 1 Mobile

Background Image Section

Section with a background image. The overlay is a separate element to allow for easier CMS powered background images on the section element.

Margin

Quick combo classes useful for adding external spacing to any item.

Margin Top
mt-10
mt-20
mt-30
mt-40
mt-50
mt-60
mt-70
mt-80
mt-90
mt-100
Margin Bottom
mb-10
mb-20
mb-30
mb-40
mb-50
mb-60
mb-70
mb-80
mb-90
mb-100
Margin Left
ml-5
ml-10
ml-15
ml-20
ml-30
ml-40
ml-50
Margin Right
mr-5
mr-10
mr-15
mr-20
mr-30
mr-40
mr-50

Background Image Section Fixed

Section with a background image. The overlay is a separate element to allow for easier CMS powered background images on the section element.

Padding

Quick combo classes useful for adding internal spacing to any item.

Padding Top
pt-10
pt-20
pt-30
pt-40
pt-50
pt-60
pt-70
pt-80
pt-90
pt-100
Padding Bottom
pb-10
pb-20
pb-30
pb-40
pb-50
pb-60
pb-70
pb-80
pb-90
pb-100
Padding Left
pl-10
pl-20
pl-30
pl-40
pl-50
Padding Right
pr-10
pr-20
pr-30
pr-40
pr-50
Padding all
p-0
p-10
p-20
p-30
p-40
p-50

Typography

To adjust the base font-size, select the body element HTML tag 'Body (All Pages)' then change the font size. Because all font elements are sized using EMs, they will adjust in line with the body's size.

Headings

Heading 1 Super

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Rich Text Block

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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.

  • Bullet 1
  • Bullet 2
  • Bullet 3
  1. Ordered list 1
  2. Ordered list 2
  3. Ordered list 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

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

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

Paragraphs

Regular paragraph

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.

Large Paragraph

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.

Small Paragraph

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.

Block Quote
Links
Text Link
Arrow link
PRIMARY BUTTON
WHITE BUTTON
OUTLINE BUTTON
LARGE BUTTON
SMALL BUTTON
White
This is some text inside of a div block.

Typography - White

All text items with one class added to apply a white colour.

Headings

Heading 1 Super

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Rich Text Block

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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.

  • Bullet 1
  • Bullet 2
  • Bullet 3
  1. Ordered list 1
  2. Ordered list 2
  3. Ordered list 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

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

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

Paragraphs

Regular paragraph

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.

Large Paragraph

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.

Small Paragraph

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.

Block Quote
Links
Text Link
Arrow link
PRIMARY BUTTON
WHITE BUTTON
OUTLINE BUTTON
LARGE BUTTON
SMALL BUTTON

Alignment

Use these classes to change the alignment of text on different screen sizes. The style applies to the screen size chosen and all below..

Left Aligned

Left Aligned

Left Aligned Tablet

Left Aligned Mobile Landscape

Left Aligned Mobile

Right Aligned

Right Aligned

Right Aligned Tablet

Right Aligned Mobile Landscape

Right Aligned Mobile

Center Aligned

Center Aligned

Center Aligned Tablet

Center Aligned Mobile Landscape

Center Aligned Mobile

Justified Aligned

Justify Aligned

Justify Aligned Tablet

Justify Aligned Mobile Landscape

Justify Aligned Mobile

50/50

A 50/50 section with an image spanning 50% of the page width, and the text remaining inside the page containter.

Cards

Vertical and horizontal card lockups, all conforming to the predefined flex grid layouts.

Scenic mountains in vast space

Regular Card
‍
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.

SMALL BUTTON
Scenic mountains in vast space

Regular Card Dark Background

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.

SMALL BUTTON
Scenic mountains in vast space

Regular Card Round Corners

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.

SMALL BUTTON
Scenic mountains in vast space

Regular Card Round Corners Shadow

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.

SMALL BUTTON
Scenic mountains in vast space

Horizontal Card

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.

SMALL BUTTON
Scenic mountains in vast space

Horizontal Card Inversed

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.

SMALL BUTTON
Scenic mountains in vast space

Horizontal Card

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.

SMALL BUTTON
Scenic mountains in vast space

Regular Card

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.

SMALL BUTTON
Scenic mountains in vast space

Horizontal Card

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.

SMALL BUTTON
Scenic mountains in vast space

Horizontal Card

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.

SMALL BUTTON

Forms

Light and dark form fields.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Helper Classes

Other useful classes

Rounded Corners
radius-5
radius-10
radius-20
radius-100
Shadow
shadow-1
shadow-2
shadow-3
Display
hidden (display none)
Inline
Inline Block
Height / Width
100VH
100VW
Hidden-Overflow

Colour

Brand colours and shading

Dark-BG
White-BG
Grey-BG
Primary-BG
Primary-Shade-BG
Primary-Tint-BG
Secondary-BG
Secondary-BG