Style Guide
This style guide page contains styles and components that are to be used throughout the website.
Typography
The different text sizes used throughout the website.
Display
This is a Display.
H1
This is a Header.
H2
This is a Header.
H3
This is a Header.
H4
This is a Header.
H5
This is a Header.
H6
This is a Header.
Large 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.
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. 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.
List
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Suspendisse varius enim in eros
Link
Text LinkColors
The different weights of primary, neutral, and accent colors used throughout the website.
Primary
Secondary A
Neutral
Semantic
Absolutes
Columns
The 12 column grid system to make it easy to align sections across different screen sizes.
1 Column
2 Column
3 Column
4 Column
5 Column
6 Column
7 Column
8 Column
9 Column
10 Column
11 Column
12 Column
Grids
Different grid layouts to use across the website.
4 Grid
3 Grid
2 Grid
2-1 Grid
1-2 Grid
Spacers
Spacer elements using the 8-pt system to give sections more room to breathe.
8 px
16 px
24 px
32 px
48 px
64 px
96 px
128 px
Text Boxes
Boxes for text elements throughout the website, e.g for a section header.