The style guide contains important styles and components that are used throughout the template.
The primary styles for text sizing used throughout the template.
Heading
XXL
Heading
XL
All H1 Headings
Heading
L
All H2 Headings
Heading
M
All H3 Headings
Heading
S
All H4 Headings
Heading
XS
All H5 Headings
Heading
XXS
All H6 Headings
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
Ordered list
Link
Text LinkThe 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
The colors used throughout the website. These classes can be added to any element to change the background color.
Button
Button
Secondary
Button
Small
Button
Secondary
Small
Button
Light
Button
Secondary
Light
Button
Light
Small
Button
Secondary
Light
Small
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.
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 used to add space between elements without adjusting classes.
Spacer
8
Spacer
16
Spacer
24
Spacer
32
Spacer
40
Spacer
48
Default form field styles for all forms used on the site.