Version 1

Style Guide

This style guide page contains styles and components that are to be used throughout a website.

Typography
HTML Headings Tags
HTML tags define default Heading styles.
All H1 Headings

Heading 1

All H2 Headings

Heading 2

All H3 Headings

Heading 3

All H4 Headings

Heading 4

All H5 Headings
Heading 5
All H6 Headings
Heading 6
Heading Classes
Heading classes when typography style doesn't match the default HTML tag.
Hero Heading

Hero Heading

H1 Style

H1 Style

H2 Style

H2 Style

H3 Style

H3 Style

H4 Style

H4 Style

H5 Style
H5 Style
H6 Style
H6 Style
Text Colours
Text color can be apply to any text element
Text Color White
Text box has color white
Text Weights
Text weight classes when typography weight doesn't match the default HTML tag.
Text Weight Thin
Text weight - Thin(100)
Text Weight ExtraLight
Text weight - ExtraLight(200)
Text Weight Light
Text weight - Light(300)
Text Weight Normal
Text weight - Normal(400)
Text Weight Medium
Text weight - Medium(500)
Text Weight SemiBold
Text weight - Semi Bold(600)
Text Weight Bold
Text weight - Bold(700)
Text Weight ExtraBold
Text weight - Extra Bold(800)
Text Weight Black
Text weight - Black(900)
Text Style
Text style classes when typography style doesn't match the default HTML tag..
Text Style Italic
Text style italic
Text Style Strikethrough
Text style strikethrough
Text Style Underline
Text style underline
Text Style Allcaps
text style allcaps
Text Style Lowercase
text style lowercase
Text Style Muted
Text Style muted
Text Alignment
Text style classes when typography style doesn't match the default HTML tag..
Text Align Left
Text align-left
Text Align Center
Text align-center
Text Style Underline
Text style underline
Text Align Right
Text align-right
Paragraphs Classes
Different paragraph with sizes
Text Size Tiny

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 Size Small

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 Size Regular

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 Size Medium

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 Size Large
This is some text inside of a div block.
Other HTML Tags
HTML tags define default text styles.
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
All Links
All Block Quotes
Block Quote
All Unordered Lists
  • No bullet list item
  • No bullet list item
All Unordered Lists
  • Bullet list item
  • Bullet list item
All Ordered Lists
  1. Ordered list item
  2. Ordered list item
  3. Ordered list item
Rich Text
Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This is a block quote

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a link inside of a rich text

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item
Caption goes here

UI elements

The different types of buttons used throughout the website.

UI Elements
Buttons
The primary color palette is used across all the interactive elements such as CTA’s, links, inputs, active states, etc
Primary button
Button
Button label
Button
Is Alt
Button label
Secondary button
Button
Is Secondary
Button label
Button
Is Secondary
Is Alt
Button label
Form elements
Field Label
Form Input
Form Input
Is Text Area
Form Input Select Wrapper
Form Checkbox
Form Radio
Form Submit Button
Form Success Message
Thank you! Your submission has been received!
Form Error Message
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Icons (HTML Embed)
HTML embed icons enable you to control icon color on hover.

Icon 16px

Icon 24px

Icon 32px

Icon 40px

Icon 48px

Icon 80px

Icon 104px

Icon Height Custom

Structure Classes

The different types of buttons used throughout the website.

Structure Classes
Main Wrapper
The main content of the page. Use a <main> HTML tag that wraps all or most of our website content sections.
Main Wrapper
Padding Global
Global horizontal spacing. This class manages the left and right padding of a page's content.
Padding Global
Page Wrapper
Outermost parent of all elements on the page. This Div Block wraps every element on the page.
Page Wrapper
Main Wrapper

The main content of the page. Use a <main> HTML tag that wraps all or most of our website content sections.
Main Wrapper
Containers
Used to center the content in page
Container Large
Container Medium
Container Small
Padding Vertical
Create top and bottom padding inside a section.
Padding Vertical
Padding Vertical
Huge
Padding Vertical
Extra Large
Padding Vertical
Large
Padding Vertical
Medium
Padding Vertical
Small
Padding Vertical
Extra Small
Padding Vertical
Tiny

margins

Use the max-width CSS property to contain inner content to a maximum width.

Margins
Direction class - Margin Top
Add decription here.
Margin Top
Tiny
Margin Top
Extra Small
Margin Top
Small
Margin Top
Medium
Margin Top
Large
Margin Top
Extra Large
Margin Top
Huge
Direction class - Margin bottom
Add decription here.
Margin Bottom
Tiny
Margin Bottom
Extra Small
Margin Bottom
Small
Margin Bottom
Medium
Margin Bottom
Large
Margin Bottom
Extra Large
Margin Bottom
Huge

Paddings

Use the max-width CSS property to contain inner content to a maximum width.

Paddings
Direction class - Padding Top
Add description here.
Padding Top
Tiny
Padding Top
Extra Small
Padding Top
Small
Padding Top
Medium
Padding Top
Large
Padding Top
Extra Large
Padding Top
Huge
Direction class - Padding bottom
Add decription here.
Padding Bottom
Tiny
Padding Bottom
Extra Small
Padding Bottom
Small
Padding Bottom
Medium
Padding Bottom
Large
Padding Bottom
Extra Large
Padding Bottom
Huge

Utility classes

Use the max-width CSS property to contain inner content to a maximum width.

Utility classes
Useful utility classes we like to use in most of our projects to build faster.
Hide
This element is hidden
Hide Tablet
This element is hidden on tablet breakpoint
Hide Mobile Portrait
This element is hidden on Mobile-portrait breakpoint
Hide Mobile Landscape
This element is hidden on mobile-landscape breakpoint
Overflow Visible
This element has set size property Overflow - Visible
Overflow Hidden
This element has set size property Overflow - Hidden
Overflow Auto
This element has set size property Overflow - Auto
Overflow Scroll
This element has set size property Overflow - Scroll
Spacing Clean
This element has set spacing property "0"
Align Center
This element has set spacing property auto
Z Index 1
This element has set position property position:relative , z-index:1
Z Index 2
This element has set position property position:relative , z-index:2
Margin Top Auto
This element has set spacing property margin-top:auto

Spacers

Spacer elements using the 8-pt system to give sections more room to breathe.

16 px

24 px
32 px
48 PX
64 PX
80 PX
96 PX
128 PX
Effects
Effects
Add description here
Box Shadow Small
Box Shadow Medium
Box Shadow Large
Good to know- You can create custom shadow classes as per design
i