Style Guide

Headings

This is an example of Heading 1

This is an example of heading 2

This is an example of heading 3

This is an example of heading 4

This is an example of heading 5
This is an example of heading 6


HTML Code:

<h1>This is an example of Heading 1</h1>
<h2>This is an example of heading 2</h2>
<h3>This is an example of heading 3</h3>
<h4>This is an example of heading 4</h4>
<h5>This is an example of heading 5</h5>
<h6>This is an example of heading 6</h6>


A simple paragraph with inline examples

This is strong text, consectetur adipisicing elit, this is text with emphasis ut labore et dolore magna aliqua. This is linked text 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.

HTML Code:

<p><strong>This is strong text</strong>, consectetur adipisicing elit, <em>this is text with emphasis</em> ut labore et dolore magna aliqua. <a href="http://www.laughingrabbit.co.uk/" target="_blank">This is linked text</a> 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.</p>


List Types

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

HTML Code:

<ol class="numberedlist">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>

 


Unordered List

  • List Item 1
  • List Item 2
  • List Item 3

HTML Code:

<ul class="bullets">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>

 


News & Events

News Item 1 Heading

Some news item text here relating to the above News Item 1 heading.

News Item 2 Heading

Some more news item text here relating to the above News Item 2 heading.

News Item 3 Heading

Some more news item text here relating to the above News Item 3 heading.

<h4 class="newsheader">News Item 1 Heading</h4>
<p>Some news item text here relating to the above News Item 1 heading.</p>
<h4 class="newsheader">News Item 2 Heading</h4>
<p>Some more news item text here relating to the above News Item 2 heading.</p>
<h4 class="newsheader">News Item 3 Heading</h4>
<p>Some more news item text here relating to the above News Item 3 heading.</p>