Links and anchors

The a element is used to hyperlink text, be that to another page, a named fragment on the current page or any other location on the web. Example:

Go to the home page or Home.

Primary button

Secondary button

h1 Heading One

h2 Heading Two

h3 Heading Three

h4 Heading Four

h5 Heading Five
h6 Heading Six

This is lead text, used to introduce a page or highlight an important paragraph or two. Do not overuse!


All paragraphs are wrapped in p tags. Additionally, p elements can be wrapped with a blockquote element if the p element is indeed a quote. Historically, blockquote has been used purely to force indents, but this is now achieved using CSS. Reserve blockquote for quotes.

And of course, there can be more than one paragraph.


The blockquote element represents a section that is being quoted from another source.

Many forms of Government have been tried, and will be tried in this world of sin and woe. No one pretends that democracy is perfect or all-wise. Indeed, it has been said that democracy is the worst form of government except all those other forms that have been tried from time to time.

Winston Churchill, in a speech to the House of Commons. 11th November 1947

Ordered Lists

  1. This is an ordered list.
  2. This is the second item, which contains a sub list
    1. This is the sub list, which is also ordered.
    2. It has two items.
  3. This is the final item on this list.

Unordered Lists

  • United Kingdom of Great Britain and Northern Ireland:
    • England
    • Scotland
    • Wales
    • Northern Ireland
  • Republic of Ireland
  • Isle of Man
  • Channel Islands:
    • Bailiwick of Guernsey
    • Bailiwick of Jersey

Custom Styles

Small print

The .small element is used to represent disclaimers, caveats, legal restrictions, or copyrights (commonly referred to as ‘small print’). It can also be used for attributions or satisfying licensing requirements. Example:

Copyright © 1922-2011 Acme Corporation. All Rights Reserved.

Horizontal rule

Content list -  Accordion

Proin magna. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Etiam feugiat lorem non metus. Nullam vel sem. Phasellus viverra nulla ut metus varius laoreet.

Ut id nisl quis enim dignissim sagittis. Sed fringilla mauris sit amet nibh. Pellentesque auctor neque nec urna. Suspendisse potenti. Sed lectus.

Ut id nisl quis enim dignissim sagittis. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Curabitur at lacus ac velit ornare lobortis. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Quisque malesuada placerat nisl.

Praesent ut ligula non mi varius sagittis. Fusce convallis metus id felis luctus adipiscing. Sed lectus. Nam adipiscing.

Phasellus blandit leo ut odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Pellentesque posuere.

Morbi vestibulum volutpat enim. Praesent blandit laoreet nibh. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Vestibulum volutpat pretium libero.

Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Ut tincidunt tincidunt erat. Nam commodo suscipit quam. Fusce neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vitae sapien ut libero venenatis faucibus. Phasellus magna. Donec mollis hendrerit risus. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo.

Etiam ut purus mattis mauris sodales aliquam. Etiam rhoncus. Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Phasellus blandit leo ut odio. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi.

Donec id justo. Nam adipiscing. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Cras dapibus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.

Fusce commodo aliquam arcu. Cras dapibus. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Fusce pharetra convallis urna.


Date 26 Nov 2020
Title Item 1
Date 26 Nov 2020
Title Item 2
Date 26 Nov 2020
Title Item 3
Date 26 Nov 2020
Title Item 4
Date 26 Nov 2020
Title Item 5
Date 26 Nov 2020
Title Item 6

No documents currently available.