Style guide
Here are the styles and components used through the site. You can make global site changes when you change styles on this page.
Typography
The different text sizes used through the site
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
Extra Large Paragraph
This is an extra large paragraph.
Large Paragraph
This is a large paragraph.
Paragraph
This is a paragraph.
Small Paragraph
This is a small paragraph.
Text colors
Text color 0
Text color 100
Text color 200
Text color 300
Text color 400
Text color 500
Text color 600
Text color 700
Text color 800
Text color 900
Text color 1000
Text color accent 1
Text color accent 2
Text Weights
Quote
“This is a block quote”
Lists
- Heading line height is fixed
- All buttons now have tooltips
- Spell checker number issue fixed
- Heading line height is fixed
- All buttons now have tooltips
- Spell checker number issue fixed
Link
More about meFigure with caption
Rich text
Formatted rich text element used for long sections of text like projects
This is a H1 Header
This is a h2 Header
This is a H3 Header
This is a H4 Header
This is a H5 Header
This is a H6 Header
This is a pragraph
“This is a block quote”
Latest updates
- Heading line height is fixed
- All buttons now have tooltips
- Spell checker number issue fixed
Colors
The different colours used through the site
Buttons
The different types of buttons used through the site
Spacers
Use spacers to add breathing room around elements
4 px
8 px
16 px
24 px
32 px
48 PX
64 PX
80 PX
96 PX
128 PX
Text Boxes
Boxes of different sizes to house text elements
400px
500px
600px
700px
800px
Forms
Form and input components to capture user input