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
Heading Styles

Heading - H1

Heading - H2

Heading - H3

Heading - H4

Heading - H5
Heading - H6
Heading Style Additional

Heading

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
Button
Button
Button is-black
Button
Background Colours
Bg Black
Bg Brand
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.
Weight 300
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 Grey
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

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