Style Guide
This style guide page contains styles and components that are to be used throughout a website
Typography
The different text sizes used throughout the site.
h1
Heading 1
H2
Heading 2
H3
Heading 3
H4
Heading 4
H5
Heading 5
H6
Heading 6
Heading Style 1
Heading 1
Heading Style 2
Heading 2
Heading Style 3
Heading 3
Heading Style 4
Heading 4
Heading Style 5
Heading 5
Heading Style 6
Heading 6
Large Paragraph
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.
Medium Paragraph
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.
reguler Paragraph
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.
Small Paragraph
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.
Tiny Paragraph
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.
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.
list
- 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 such as blog posts.
This is a 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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidid
Lastest Update
- Heading line height is fixed
- All buttons now have tooltips
- Spell checker number issue fixed
Colors
The different weights of greys and colours used throughout the website.
Spacers
Spacer elements using the 8-pt system to give sections more room to breathe.
Spacer XSmall
Spacer Small
Spacer XXLarge
8px
16px
24px
32px
48px
64px
80px
96px
128px
Text Boxes
Boxes for text elements throughout the website, e.g for a section header.
400px
500px
600px
700px
800px
Structure
Boxes for text elements throughout the website, e.g for a section header.
Padding
Padding Small
Padding Medium
Padding Large
Padding Bottom
Padding Top
Padding Vertical
Padding Horizontal
Padding Left
Padding Right
Padding 4px
Padding 8px
Padding 16px
Padding 24px
Padding 32px
Padding 48px
Padding 64px
Padding 80px
Padding 100px
Padding 112px
Padding 120px
Padding 160px
Margin
Margin Bottom
Margin Top
Margin Vertical
Margin Horizontal
Margin Left
Margin Right
Margin 4px
Margin 8px
Margin 16px
Margin 24px
Margin 32px
Margin 48px
Margin 64px
Margin 80px
Margin 100px
Margin 120px
Margin 160px
Utility Class
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Align Center
Z Index -2
Z Index -1
Z Index 1
