Style Guide

Here is a summary of some of the main styles used throughout the site. If you edit styles here, they will change across the site.

Typography

HTML Heading Tags

Tags to define default HTML Heading styles.

This is a H1

This is a H2

This is a H3

This is a H4

This is a H5

This is a H6

Typography

Other HTML Tags

Tags to define default HTML text styles.

All paragraphs

This is a paragraph.

All Links

This is a link.

All Quotes

This is a quote.

All Ordered Lists

This is an ordered list.
This is an ordered list.
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.

This is an ordered list.
This is an ordered list.
This is an ordered list.

This is a quote.

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

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

Text Size Large

This is a paragraph with text size large.

Text Size Medium

This is a paragraph with text size medium.

Text Size Regular

This is a paragraph with text size regular.

Text Size Small

This is a paragraph with text size small.

Text Size XSmall

This is a paragraph with text size xsmall.

Accent

Features

Accent Small

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 #292929

Beige #FBF5F1

Blue #2F5FC7

Yellow #FFF26F

Green #0F7A60

White # FFFFFF

Color Palette

Text Color

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

Text Color Black

Text Color Blue

Text Color Beige

Text Color Green

Text Color White

Buttons

Button Blue Small

Button Blue Medium

Button Blue Large

Button Green Small

Button Green Medium

Button Green Large

Button Beige Small

Button Beige Medium

Button Beige
Large

Icons

Uniform icons sizes used throughout the template.

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

Main Wrapper

Container - Small

Container Medium

Container Large

Container Full Width

Padding Global

Padding Section Small

Padding Section Medium

Padding Section Large

Button Group

Layout

Multi-column layouts used throughout the template.

2 Column Grid

2 Column Grid Uneven Right

2 Column Grid Uneven Left

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