Style guide

Type styles

Heading XL

Heading 01

Heading 02

Heading 03

Heading 04

Heading 05
Heading 06
Heading 07
Heading 08
Heading 09
Heading 10

Subhead 01

Subhead 02

Subhead 03

Subhead 04

Subhead 05

Subhead 06

Subhead 07

Subhead 08

Subhead 09

hr


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.

Colours

Primary
Primary 1
#e32728
Red
Primary 2
#f93c3c
Pop Red
Primary 3
#c11313
Rollover Red
Greys
Grey 1
#f2f2f2
Grey 2
#e8e8e8
Grey 3
#dfdfdf
Grey 4
#cbcbcb
Grey 5
#8a8a8a
Grey 6
#484848
Grey 7
#343434
Grey 8
#151515
Black / White
Black
#201e1e
Warm 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

Buttons

Buttons Size Default
Buttons Size Default Disabled




Buttons Size Default w/ Icons
Buttons Size Default w/ Icons Disabled





Buttons Size Small
Buttons Size Small w/ Icons
Buttons Size Small w/ Icons Disabled

Animated Icons

NB: When icon snippets are used within an active element (link/button) that element must have the class "group" to get the hover/focus styling to work.

Close Icons
Hamburger Icon
Play Icon
Plus Icon

Static Icons

Header Icons
2
2
Social Icons
US English

Form Elements

Input Text
Input Email
Input Password
Input Tel
Select
Search
Input Checkbox
Input radio
Text Area

Standard Table Element

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

RTE Table Element

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

RTE Small Table Element

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

Grid

12 Columns
Inset Columns
Inset
Inset Medium
Inset Tight

Grid

24 Columns
Inset Columns
Inset
Inset Medium
Inset Tight