Typography
The different Heading and Body copy sizes used throughout the site.
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Heading Tags
Heading XL
Heading L
Heading M
Heading XS
Rich Text
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.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
Text Tags
Text Label - Use this as a pre-header for other content
Text Callout - Use this for drawing attention to a specific body of text.
Text Body - Default text size for text boxes and paragraphs.
Text Caption - This is used for fine print, copyright, or other tiny text.
Icons & Spacers
Spacers use multiples of 8px to give your pages more white space.
Icons
Small
Medium
Base
Large
XL
ICon List
List Item
List Item
List Item
List Item
16
24
32
48
64
96
128
Colors
Brand
Grey
Buttons
Primary
Secondary
TExt Button
Images
Rounded image
Parallax Image
Image with Caption
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.
Section Containers
There are three section widths, using "container" classes to differentiate them.
Large Container
Medium Container
Small Container
Grids
Sections can be layed out using a 6-column grid system.
6 Column Grid
5 Column Grid
4 Column Grid
3 COlumn Grid
2 Column Grid
1 Column Grid
One-Third / Two-Thirds
Two-Thirds / One-Third
One-Quarter / Three-Quarters
Multi Grid Layouts