Style Guide

The style guide contains important styles and components that are used throughout the template.

Typography

The primary styles for text sizing used throughout the template.

Heading

XXL

This is a heading.

Heading

XL

This is a heading.

All H1 Headings

This is a heading.

Heading

L

This is a heading.

All H2 Headings

This is a heading.

Heading

M

This is a heading.

All H3 Headings

This is a heading.

Heading

S

This is a heading.

All H4 Headings

This is a heading.

Heading

XS

This is a heading.

All H5 Headings

This is a heading.

Heading

XXS

This is a heading.

All H6 Headings

This is a heading.

Paragraph

L

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.

Paragraph

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

Paragraph

S

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 Color White

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.

Block Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Unordered list

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet

Ordered list

  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet

Colors

The colors used throughout the website. These classes can be added to any element to change the background color.

Dark 900

Dark 500

Dark 200

Dark 100

Light 500

Light 100

Blue

Purple

Orange

Yellow

Buttons

The colors used throughout the website. These classes can be added to any element to change the background color.

Button

Secondary

Button

Small

Button

Secondary

Small

Button

Light

Button

Secondary

Light

Button

Light

Small

Button

Secondary

Light

Small

Columns

Most of the template uses a 12-column layout system. The number of columns a block takes up is denoted by the class name. Changes to tablet and mobile breakpoints can be made with combo classes.

Column

Desktop 1

Tablet 1

Mobile 1

Column

Desktop 2

Tablet 2

Mobile 2

Column

Desktop 3

Tablet 3

Mobile 3

Column

Desktop 4

Tablet 4

Mobile 4

Column

Desktop 5

Tablet 5

Mobile 5

Column

Desktop 6

Tablet 6

Mobile 6

Column

Desktop 7

Tablet 7

Mobile 7

Column

Desktop 8

Tablet 8

Mobile 8

Column

Desktop 9

Tablet 9

Mobile 9

Column

Desktop 10

Tablet 10

Mobile 10

Column

Desktop 11

Tablet 11

Mobile 11

Column

Desktop 12

Tablet 12

Mobile 12

12 Columns

Parent container used for above column classes.

12 Columns

Align Top

Aligns child items to the top of each other.

12 Columns

Align Bottom

Aligns child items to the bottom of each other.

12 Columns

Align Stretch

Stretches all child items to fit the tallest item.

12 Columns

Justify Left

Justifies child items to the left of the columns.

12 Columns

Justify right

Justifies child items to the right of the columns.

12 Columns

Space Between

Justifies child items to the opposite sides of the columns.

12 Columns

Space Around

Adds equal space around all child items.

12 Columns

Reverse

Flips the order of the child items.

Grids

Grid columns to be used alongside 12-column layout system.

Grid

Grid

3 Column

Grid

4 Column

Grid

2:1 Column

Grid

1:2 Column

Spacers

Spacers used to add space between elements without adjusting classes.

Spacer

8

Spacer

16

Spacer

24

Spacer

32

Spacer

40

Spacer

48

Forms

Default form field styles for all forms used on the site.

Thank you! Your message has been received!
Oops! Something went wrong. Please fill in the required fields and try again.