Styleguide & Pattern Library

The role of this document is to demonstrate our code components & markup patterns. All of our components should be location independent, meaning they should not require a layout & positioning layer above them in order to render correctly, and should rather adapt to changes in location. This results in flexible, consistent components that can be assembled together on any page, in any zone, using any template. When building out a site, adopt a site-wide modular approach rather than a page specific one.

Level 2 Heading

Level 3 Heading

Level 4 Heading

Level 5 Heading

Level 6 Heading

Text-Level Elements

Paragraphs

This is a leader paragraph. It's purpose is to be more prominent than those that follow, poor things. Curabitur mattis ullamcorper luctus. Nunc feugiat, nunc eu tristique scelerisque, dui purus sodales lacus, quis fermentum libero mi vitae eros. Curabitur auctor, felis in convallis luctus, sem arcu laoreet diam, quis sodales dolor dolor sit amet neque. Sed lectus ante, consectetur eu vestibulum nec.

This is a normal paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, Donec posuere dui vel lorem tristique non tristique leo faucibus. Curabitur mattis ullamcorper luctus. Nunc feugiat, nunc eu tristique scelerisque, dui purus sodales lacus, quis fermentum libero mi vitae eros. Curabitur auctor, felis in convallis luctus, sem arcu laoreet diam, quis sodales dolor dolor sit amet neque. Sed lectus ante, consectetur eu vestibulum nec, faucibus ut quam. Pellentesque feugiat blandit consequat. Fusce porttitor dignissim sem sit amet fringilla. Duis in euismod sapien. Nullam non sapien elit, in tempus lacus.

This is another normal paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, Donec posuere dui vel lorem tristique non tristique leo faucibus. Curabitur mattis ullamcorper luctus. Nunc feugiat, nunc eu tristique scelerisque, dui purus sodales lacus, quis fermentum libero mi vitae eros. Curabitur auctor, felis in convallis luctus, sem arcu laoreet diam, quis sodales dolor dolor sit amet neque. Sed lectus ante, consectetur eu vestibulum nec, faucibus ut quam. Pellentesque feugiat blandit consequat. Fusce porttitor dignissim sem sit amet fringilla. Duis in euismod sapien. Nullam non sapien elit, in tempus lacus.

Blockquotes

Andy, completely inappropriately, said the following...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique.

Andy, while building the Styleguide. Jan 2013.

Hyperlinks, Emphasis, Importance

This is the default link style followed by some emphasised text resulting in something very important!

Images/Figures

This is a figure element — Here is the figure caption to describe our image.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, Donec posuere dui vel lorem tristique non tristique leo faucibus. Curabitur mattis ullamcorper luctus. Nunc feugiat, nunc eu tristique scelerisque, dui purus sodales lacus, quis fermentum libero mi vitae eros. Curabitur auctor, felis in convallis luctus, sem arcu laoreet diam, quis sodales dolor dolor sit amet neque. Sed lectus ante, consectetur eu vestibulum nec, faucibus ut quam. Pellentesque feugiat blandit consequat. Fusce porttitor dignissim sem sit amet fringilla. Duis in euismod sapien. Nullam non sapien elit, in tempus lacus.

Lists

Unordered List

List item goes here
List item goes here list item goes here
List item goes here
- Nested list item goes here
- Nested list item goes here list item goes here
- Nested list item goes here
List item goes here list item goes here
List item goes here
List item goes here list item goes here

Ordered List

List item goes here
List item goes here list item goes here
List item goes here
1. Nested list item goes here
2. Nested list item goes here list item goes here
3. Nested list item goes here
List item goes here list item goes here
List item goes here
List item goes here list item goes here

Definition Lists

This is the term: This is the definition of the term right here
This is the term: This is the definition of the term right here
This is the term: This is the definition of the term right here
This is the term: This is the definition of the term right here

Tabular Data

Here is the table caption.
Table Head	Table Head	Table Head	Table Head
Table Footer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue.	Table cell	Table cell	Link 1 Link 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue.	Table cell	Table cell	Link 1 Link 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue.	Table cell	Table cell	Link 1 Link 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue.	Table cell	Table cell	Link 1 Link 2

Screen Messaging

Neutral. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Important. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Error. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Success. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Assistance. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Columns

2 Col

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique.

3 Col

4 Col

5 Col

Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique.