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.

This is a heading.

Heading L

This is a heading.

This is a heading.

Heading M

This is a heading.

This is a heading.

Heading S

This is a heading.

This is a heading.

Heading XS

This is a heading.
This is a heading.

Heading XxS

This is a heading.
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.

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.

List

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

Link

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Colors

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

Buttons

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

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.

1

2

3

4

5

6

7

8

9

10

11

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 Reverse

Flips the order of the child items.

Grids

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

4-column Grid

3-column Grid

2-column Grid

2:1 Grid

1:2 Grid

Spacers

Spacers used to add space between elements without adjusting classes.

8 px

16 px

24 px

32 px

40 px

48 px

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.