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
Heading L
Heading M
Heading S
Heading XS
Heading XS
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.
Small 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
Link
Text LinkCallout
Callout Text
The colors used throughout the website. These classes can be added to any element to change the background color.
The button styles used throughout the website. These are components that can easily be placed and retain all styles and interactions.
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.
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 used to add space between elements without adjusting classes.
8 px
16 px
24 px
32 px
40 px
48 px
56 px
64 px
72 px
80 px
88 px
96 px
Various section and container classes used throughout the site.
Section
Section m
Section L
Container
Container Wide
Text Center
Applied to parent div block to center align all text.
Text Center
Applied to parent div block to center align all text.
Containing boxes for text blocks that limit the characters allowed per line.
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.
M
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.
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.
Default form field styles for all forms used on the site.
Tab system available to use on the website.
