Style Guide

Typography
HTML Headings Tags

H1
Sample text is being used as a placeholder.

H2
Sample text is being used as a placeholder as real text.

H3
Sample text helps you understand how real text may look on your website.

H4
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.

H5
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.
H6
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 that is normally present.
Heading Classes

Heading Style H1

Heading Style H2

Heading Style H3

Heading Style H4

Heading Style H5

Heading Style H6

Other HTML 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.

All Links
Block Quote

  • List item

  • List item

  1. List item

  2. List item

  3. List item

Text Sizes

Text Size Large
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 Size Medium
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 Size Regular
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 Size Small
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 Size Tiny
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 Weights
Text Weight Xbold (800)
Text Weight Bold (700)
Text Weight Semibold (600)
Text Weight Medium (500)
Text Weight Normal (400)
Text Weight Light (300)
Text Styles
Text Style Italic
Text Style Strikethrough
Text Style Allcaps
Text Style Nowrap
Text Style Quote
Text Style Link
Text Style Muted
Text Alignment
Text Align Left
Text Align Center
Text Align Right
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
Colors
Colors
Text Color White
Text Color Secondary
UI Elements
Buttons
Button
Button
Button
Button
Button
Button
Buttons With Icons
Button
Arrow
Button
Arrow
Button
Arrow
Button
Arrow
Icons (Image)
Arrow
Arrow
Arrow
Arrow
Arrow
Arrow
Arrow
Arrow
Arrow
Arrow
Arrow
Arrow
Structure Classes
Defined and flexible core structure we can use on all or most pages.
Page Wrapper
Main Wrapper
Container Small
Container Medium
Container Large
Padding Global
Padding Section Small
Padding Section Medium
Padding Section Large
Button Group
Max Widths
Use the max-width CSS property to contain inner content to a maximum width.
Max Width Full
Max Width Full Tablet
Max Width Full Mobile Landscape
Max Width Full Mobile Portrait
Max Width Xxlarge
Max Width Xlarge
Max Width Large
Max Width Medium
Max Width Small
Max Width Xsmall
Max Width Xxsmall
Paddings
Direction Classes
Padding Bottom
Padding Top
Padding Vertical
Padding Horizontal
Padding Left
Padding Right
Size Classes
Padding 0
Padding Tiny
Padding Xxsmall
Padding Xsmall
Padding Small
Padding Medium
Padding Large
Padding Xlarge
Padding Xxlarge
Padding Huge
Padding Xhuge
Padding Xxhuge
Margins
Direction Classes
Margin Bottom
Margin Top
Margin Vertical
Margin Horizontal
Margin Left
Margin Right
Size Classes
Margin 0
Margin Tiny
Margin Xxsmall
Margin Xsmall
Margin Small
Margin Medium
Margin Large
Margin Xlarge
Margin Xxlarge
Margin Huge
Margin Xhuge
Margin Xxhuge
Spacers
Unified spacer system for the project.
Spacer Tiny
Spacer Xxsmall
Spacer Xsmall
Spacer Small
Spacer Medium
Spacer Large
Spacer Xlarge
Spacer Xxlarge
Spacer Huge
Spacer Xhuge
Spacer Xxhuge
Utility Classes
Useful utility classes we like to use in most of our projects to build faster.
hide
This element is hidden
Hide Tablet
Hide Mobile Portrait
Hide Mobile Landscape
Overflow Hidden
Spacing Clean
Align Center
Z Index 1
Z Index 2
Margin Top Auto