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
This is a Header
h2
This is a Header
This is a Header
h3
This is a Header
This is a Header
h4
This is a Header
This is a Header
h5
This is a Header
This is a Header
h6
This is a Header
This is a Header
Extra Large Paragraph
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.
Large Paragraph
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.
Paragraph
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.
Small Paragraph
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.
Text colors
Text color 900
Text color 800
Text color 700
Text color 600
Text color primary
Text color primary light
Text Weights
Quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
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
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
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
