Style Guide

The style guide contains important styles and components that are used throughout the template. If you edit styles here, they will change across the site.

Typography

HTML Heading Tags

Tags to define default HTML Heading styles.

H1

This is a H1

H2

This is a H2

H3

This is a H3

H4

This is a H4

H5
This is a H5
H6
This is a H6

Typography

Other HTML Tags

Tags to define default HTML text styles.

All paragraphs

This is a paragraph.

All Quotes
This is a quote.
All Ordered Lists
  1. This is an ordered list.
  2. This is an ordered list.
  3. This is an ordered list.
All Unordered Lists
  • This is an unordered list.
  • This is an unordered list.
  • This is an unordered list.
Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This is a paragraph with a link.

  • This is an unordered list.
  • This is an unordered list.
  • This is an unordered list.
  1. This is an ordered list.
  2. This is an ordered list.
  3. This is an ordered list.
This is a quote.
Image caption.

Typography

Heading Styles

Use these text classes when the visual typography style you want doesn't match the default HTML tag.

Heading Style H1

This is Heading style H1.

Heading Style H2

This is Heading style H2.

Heading Style H3

This is Heading style H3.

Heading Style H4

This is Heading style H4.

Heading Style H5

This is Heading style H5.

Heading Style H6

This is Heading style H6.

Typography

Text Sizes

Text Size Regular

This is a paragraph with text size regular.

Text Size Small

This is a paragraph with text size small.

Text Size Tiny

This is a paragraph with text size tiny.

Accent
Features

Color Palette

Background Color

These colors have been created using Variables. If you edit the Variable color, it will change every element that uses that color Variable.

Black #00000
White #FFFFFF
Light Pink #FFF0F7
Red #DD6249
Green #ABB249
Orange #E8A94C

Buttons

Button Primary
Button Text
Button Small
Button Text
Button Large
Button Text
Button Secondary
Button Text

Icons

Uniform icons sizes used throughout the template.

Icon 1x1 XSmall
Icon 1x1 Small
Icon 1x1 Medium
Icon 1x1 Large

Forms

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

Structure

Core structure classes used throughout the template.

Page Wrapper
Container - Small
Container Medium
Container Large
Padding Global
Padding Section Small
Padding Section Medium
Padding Section Large
Button Group

Layout

Multi-column layouts used throughout the template.

2 Column Grid
3 Column Grid
4 Column Grid

Spacers

Uniform spacer sizes used throughout the template.

Spacer XXXSmall
Spacer XXSmall
Spacer XSmall
Spacer Small
Spacer Medium
Spacer Large
Spacer XLarge
Spacer XXLarge
Spacer XXXLarge
Spacer XXXXLarge