Style Guide

This is where we start all projects, a solid base and a stringent set of design rules.

Display Heading Classes

display-3xl - Big Boy Text

display-2xl - Big Boy Text

display-xl - Big Boy Text

display-lg - Big Boy Text

display-md - Big Boy Text

display-sm - Big Boy Text

Sub Heading Classes

text-sub-4xl - A sub heading for more information.

text-sub-3xl - A sub heading for more information.

text-sub-2xl - A sub heading for more information.

text-sub-xl - A sub heading for more information.

text-sub-lg - A sub heading for more information.

text-sub-md - A sub heading for more information.

text-sub-sm - A sub heading for more information.

text-sub-xs - A sub heading for more information.

HTML Heading Tags

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading Classes

heading-xl

heading-lg

heading-md

heading-sm

heading-xs

heading-xxs

Text Classes

body-1 - Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

body-2 - Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

button-1 - Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

button-2 - Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

eyebrow-1 - Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

eyebrow-2 - Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-style-strikethrough

text-style-italic

text-style-allcaps

text-style-nowrap

text-style-wrap

text-style-link

  • The rich text element allows you to format headings.
  • The rich text element allows you to create and format headings, the rich text element allows you to create and format headings.
  • The rich text element allows you to format headings.
  1. The rich text element allows you to format headings.
  2. The rich text element allows you to create and format headings, the rich text element allows you to create and format headings.
  3. The rich text element allows you to format headings.

Other HMTL Tags

All Paragraphs - Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

Text link
Blockquote - Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

Divider Line

Text Weights

text-weight-regular

text-weight-semibold

Text Alignments

text-align-left

text-align-center

text-align-right

Text Colours

text-color-primary

text-color-secondary

text-color-tertiary

Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Preformatted

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

  • The rich text element allows you to create and format headings
  • The rich text element allows you to create and format headings
  • The rich text element allows you to create and format headings
  1. The rich text element allows you to create and format headings
  2. The rich text element allows you to create and format headings
  3. The rich text element allows you to create and format headings

 

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

 

Buttons