Style Guide

This style guide is designed to contain all common elements of the website being developed, it has been structured to contain all of the global common elements at the top with the more specific components further down. It is wrapped within the site's common header, footer and navigation sections.

NB. When initially created, this style guide is classified as unstyled.

Settings

Colours

Elements

Headings

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam mauris eu semper dapibus. Vestibulum elementum, risus a mattis eleif endconsec tetur adipiscing elit mper.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam mauris eu semper dapibus. Vestibulum elementum, risus a mattis eleif endconsec tetur adipiscing elit mper.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam mauris eu semper dapibus. Vestibulum elementum, risus a mattis eleif endconsec tetur adipiscing elit mper.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam mauris eu semper dapibus. Vestibulum elementum, risus a mattis eleif endconsec tetur adipiscing elit mper.

Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam mauris eu semper dapibus. Vestibulum elementum, risus a mattis eleif endconsec tetur adipiscing elit mper.

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam mauris eu semper dapibus. Vestibulum elementum, risus a mattis eleif endconsec tetur adipiscing elit mper.

Typography

Standard body text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac tristique dolor. Sed ut finibus ex. Vestibulum quis mattis leo. Cras ac diam elit. Etiam facilisis tellus vel ligula porta, vel tincidunt diam laoreet. Praesent lacinia non felis eget pellentesque. Nunc at purus dolor. Pellentesque eu dignissim mauris. Donec tincidunt ut libero at volutpat. Cras et sagittis ipsum, sed pulvinar lacus. Proin sit amet fringilla leo. Quisque sodales dapibus elit, non mollis justo auctor ut. Sed rutrum tincidunt euismod.

Bold Italic Hyperlink

• Unordered list
• Unordered list with nesting
  • Unordered list
  • Unordered list

1. Ordered list
2. Ordered list with nesting
   1. Ordered list
   2. Ordered list

Quote text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tables

Table heading 1	Table heading 2	Table heading 3
Paragraph	Paragraph	Paragraph
Paragraph	Paragraph	Paragraph
Paragraph	Paragraph	Paragraph

Objects

Icons

Components

Buttons

Standard button Secondary button Small button Large button Button with arrow

Forms

Trumps

Link with underline