STYLE GUIDE

Main Grid
Headings
All Heading

All Heading - H1

All Heading - H2

All Heading - H3

All Heading - H4

All Heading - H5
All Heading - H6
All Html Tags
All Paragraphs

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.

All Links
Text Link
All Ordered List
  • 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.
All Unordered List
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Buttons
Primary Button
Start Free Trial
Secondary Button
Start Free Trial
Background Colours
Light Black
Navy Blue
Text Size
Text XLarge
This is some text inside of a div block.
Text Large
This is some text inside of a div block.
Text Medium
This is some text inside of a div block.
Text Small
This is some text inside of a div block.
Text Xsmall
This is some text inside of a div block.
Text Style
Text Strikethrough
This is some text inside of a div block.
Text Italic
This is some text inside of a div block.
Text Caps
This is some text inside of a div block.
Text Nowrap
This is some text inside of a div block.
Text Weight
Weight 800
This is some text inside of a div block.
Weight 700
This is some text inside of a div block.
Weight 600
This is some text inside of a div block.
Weight 500
This is some text inside of a div block.
Weight 400
This is some text inside of a div block.
Text Alignment
Text Align Left
This is some text inside of a div block.
Text Align Center
This is some text inside of a div block.
Text Align Right
This is some text inside of a div block.
Text Colors
Text Color Black
This is some text inside of a div block.
Text Color White
This is some text inside of a div block.
Text Color Brand
This is some text inside of a div block.
Useful Elements
Hide
Hide on All screen
Hide Desktop
Hide on Desktop only
Hide Tablet
Hide on Tablet only
Hide Landscape
Hide on Landscape only
Hide Mobile
Hide on Mobile only
Overflow Hidden
Overflow Auto
Overflow Visible
Max Width
Max Width XXlarge
Max Width Xlarge
Max Width Large
Max Width Medium
Max Width Small
Max Width Xsmall
Max Width XXsmall
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

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript