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>


Some 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.

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. </p>


A Simple Paragraph

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. 

Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.

HTML Code:

<p>Lorem ipsum dolor sit amet, <a title="test link" href="#">test link</a> adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.</p>
<p>Lorem ipsum dolor sit amet, <em>emphasis</em> consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. </p>


List Types

Definition List

Definition List Title
This is a definition list division.

 

 

HTML code:

<dl><dt>Definition List Title</dt><dd>This is a definition list division.</dd></dl>


Ordered List

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

HTML Code:

<ol class="standardlist">
<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="standardlist">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>


Blockquote Example

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

 

HTML Code:

<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</blockquote>


Table Example

NameAddressPhone
Nicholas 10 Elm Street +1 (555) 234-2322
Ted 281a Elmvale Road +1 (555) 389-2391
Dwayne 892 Henley Cresent +1 (555) 950-9234

 

HTML Code:

<table class="standardtable">
<thead>
<tr><th>Name</th><th>Address</th><th>Phone</th></tr>
</thead>
<tbody>
<tr>
<td>Nicholas</td>
<td>10 Elm Street</td>
<td>+1 (555) 234-2322</td>
</tr>
<tr>
<td>Ted</td>
<td>281a Elmvale Road</td>
<td>+1 (555) 389-2391</td>
</tr>
<tr>
<td>Dwayne</td>
<td>892 Henley Cresent</td>
<td>+1 (555) 950-9234</td>
</tr>
</tbody>
</table>


Form & Survey Sections

:

Petition Sign up

Translate this page:

Latest News

This is a common English phrase to make the point that it’s always useful to develop ideas with a friend or colleague,.....

Advice4Renters Blog

Why not read our latest Blog Post or look through the list of older posts for lots of interesting articles.

open_comment.png
I'm truly very grateful for the assistance I received from your organisation and can confirm to be in a better position as a result of it…… up until this year, I had to put up with outrageous matters moving from home to home, letting myself be depressed just because I was not aware of the outstanding work you do.
close_comment.png
facebook.png twitter.png