Skip to content

Sample announcement bar with a placeholder link

Style Guide

Buttons

Primary
Secondary
Outline
Link
Example inline text link
Primary
White

Icons

Header Icons
2
Animated Icons
Slider Arrows
Social Icons
Trust Badges
Header Icons
2
Animated Icons
Slider Arrows
Social Icons
Miscellaneous Icons

Colors

Brand
Primary
Greys
Grey 01
Grey 02
Grey 03
Grey 04
Grey 05
Grey 06
Grey 07
Black / White
Black
White
Status Success
Success 1
Success 2
Success 3
Success 4
Success 5
Success 6
Status Warning
Warning 1
Warning 2
Warning 3
Warning 4
Warning 5
Warning 6
Status Error
Error 1
Error 2
Error 3
Error 4
Error 5
Error 6

Typography

Heading 1

Heading 2

Heading 3

Heading 4
Heading 5
Heading 6
Heading 7
Heading 8
Heading 9

Subhead 1

Subhead 2

Subhead 3

Subhead 4

Subhead 5

Subhead 6

Subhead 7

Subhead 8

Subhead 9

Subhead 10

Text 1: Placerat donec cras aliquam imperdiet. Nullam est rhoncus semper id risus semper viverra semper.

Text 2: Placerat donec cras aliquam imperdiet. Nullam est rhoncus semper id risus semper viverra semper.

Text 3: Placerat donec cras aliquam imperdiet. Nullam est rhoncus semper id risus semper viverra semper.

Text 4: Placerat donec cras aliquam imperdiet. Nullam est rhoncus semper id risus semper viverra semper.

Text 5: Placerat donec cras aliquam imperdiet. Nullam est rhoncus semper id risus semper viverra semper.

Text 6: Placerat donec cras aliquam imperdiet. Nullam est rhoncus semper id risus semper viverra semper.

Text 7: Placerat donec cras aliquam imperdiet. Nullam est rhoncus semper id risus semper viverra semper.

Text 1 - Light: Placerat donec cras aliquam imperdiet. Nullam est rhoncus semper id risus semper viverra semper.

Text 2 - Light: Placerat donec cras aliquam imperdiet. Nullam est rhoncus semper id risus semper viverra semper.

Text 3 - Light: Placerat donec cras aliquam imperdiet. Nullam est rhoncus semper id risus semper viverra semper.

Text 4 - Light: Placerat donec cras aliquam imperdiet. Nullam est rhoncus semper id risus semper viverra semper.

Text 5 - Light: Placerat donec cras aliquam imperdiet. Nullam est rhoncus semper id risus semper viverra semper.

Text 6 - Light: Placerat donec cras aliquam imperdiet. Nullam est rhoncus semper id risus semper viverra semper.

Text 7 - Light: Placerat donec cras aliquam imperdiet. Nullam est rhoncus semper id risus semper viverra semper.

HR


Form Elements

Table Elements

Heading 0 Heading 1 Heading 2 Heading 3 Heading 4 Heading 5
Row 0 / Column 0 Row 0 / Column 1 Row 0 / Column 2 Row 0 / Column 3 Row 0 / Column 4 Row 0 / Column 5
Row 1 / Column 0 Row 1 / Column 1 Row 1 / Column 2 Row 1 / Column 3 Row 1 / Column 4 Row 1 / Column 5
Row 2 / Column 0 Row 2 / Column 1 Row 2 / Column 2 Row 2 / Column 3 Row 2 / Column 4 Row 2 / Column 5
Row 3 / Column 0 Row 3 / Column 1 Row 3 / Column 2 Row 3 / Column 3 Row 3 / Column 4 Row 3 / Column 5
Row 4 / Column 0 Row 4 / Column 1 Row 4 / Column 2 Row 4 / Column 3 Row 4 / Column 4 Row 4 / Column 5
Row 5 / Column 0 Row 5 / Column 1 Row 5 / Column 2 Row 5 / Column 3 Row 5 / Column 4 Row 5 / Column 5

Container

Breakout
Breakout Right
Breakout Left

Grid

6 / 24 Columns
Inset Columns
Inset
Inset Medium
Inset Tight

Content Container

Longform text including articles and pages (max-width: 70em)

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Section Spacing

Section Spacing SM (40-80px)
Section Spacing MD (50-100px)
Section Spacing LG (60-120px)
Loading