We use cookies to enhance your experience on our website. By continuing to use our website, you are agreeing to our use of cookies. You can change your cookie settings at any time. Find out more

Headers

This is a H1

This is a H2

This is a H3

This is a H4

Don’t use H1’s as they’re usually set using the title field when creating a post

Headings shouldn’t be links

<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>

Standard paragraph

Keep bold and italics to a minimum, don’t style paragraphs of text. Italicised text is harder to scan and read.

Don’t use breaks < br > to create a new paragraph.

Lorem ipsum dolor sit met, consectetur adipiscing elit. Broin molestie veli sit met turpis sojales, sed porttutor enim commode. Prooien pharetra sit met nisi eu aliquam. Nullam auctor manris eget spaden placerat, vitae iaculis turpis euismod. Sed quis efficitur erat, id dapibus magna. Aegean ac nunc aliquam, vestibule arcu ac, dapibus lectus. Class patent taciti sociosqu ad litro torquent per connubio nostra, per inceptos himenaeos. Sed feugiat velit varius bibendum bibendum. Sed lorem torsor, euismod sit smet nulla quis, viverra porttutor libero. Quisque nec ante id enim luctus imperdiet eget nec ex. In tac habitasse platea dictumst. Nam aliquet nis at eros viverra mollis.

<p>Lorem ipsum dolor sit met, consectetur adipiscing elit. Broin molestie veli sit met turpis sojales, sed porttutor enim commode. Prooien pharetra sit met nisi eu aliquam. Nullam auctor manris eget spaden placerat, vitae iaculis turpis euismod. Sed quis efficitur erat, id dapibus magna. Aegean ac nunc aliquam, vestibule arcu ac, dapibus lectus. Class patent taciti sociosqu ad litro torquent per connubio nostra, per inceptos himenaeos. Sed feugiat velit varius bibendum bibendum. Sed lorem torsor, euismod sit smet nulla quis, viverra porttutor libero. Quisque nec ante id enim luctus imperdiet eget nec ex. In tac habitasse platea dictumst. Nam aliquet nis at eros viverra mollis.</p>

Lead paragraph

This is a lead paragraph Lorem ipsum dolor sit met, consectetur adipiscing elit. Broin molestie veli sit met turpis sojales, sed porttutor enim commode.

Generaly used for short introductions at the top of articles.

There should only be one lead paragraph per page

    <p class="lead">This is a lead paragraph Lorem ipsum dolor sit met, consectetur adipiscing elit. Broin molestie veli sit met turpis sojales, sed porttutor enim commode.</p>
  

Ordered lists

Lists should be single lines. Two lines at the most.

  1. List item 1
  2. List item 2
  3. List item 3
<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

Un-ordered lists

Lists should be single lines. Two lines at the most.

  • List item 1
  • List item 2
  • List item 3
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

List with accessible heading

Using aria-labelled by helps screen readers understand the realtionship between a list and its heading. Remember to use unique id and aria-labelledby when using multiple lists on a page

Colours

  • Red
  • Green
  • Blue
  • Yellow
  • Orange
<h4 id="list-heading">Colours</h4>
<ul aria-labelledby="list-heading">
<li>Red</li>
<li>Green</li>
<li>Blue</li>
<li>Yellow</li>
<li>Orange</li>
</ul>