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
HTML tags define default 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
HTML tags define default text styles.
This is a paragraph.
This is a quote.
- This is an ordered list.
- This is an ordered list.
- This is an ordered list.
- This is an unordered list.
- This is an unordered list.
- This is an unordered list.
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.
This is Heading style H1.
This is Heading style H2.
This is Heading style H3.
This is Heading style H4.
This is Heading style H5.
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.
This is a paragraph with text size large.
This is a paragraph with text size medium.
This is a paragraph with text size regular.
This is a paragraph with text size small.
This is a paragraph with text size tiny.
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.
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.
Buttons
Icons
Uniform icons sizes used throughout the template.
Forms
Structure
Structure
Core structure classes used throughout the template.
Layout
Multi-column layouts used throughout the template.
Spacers
Unify icons sizes. icon-height sets height of icons. icon-1x1 sets both height and width of icons.
