This is the final chunk of the page and collects together useful snippets that you can use anywhere in the site.

Headings

In this section, we're testing to make sure that all headings run neatly in to each other and in to content.

[Top]

Paragraphs

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organise longer prose.

[Top]

Blockquotes

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.

It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.

Said no one, ever.

[Top]

Lists

Definition list

Definition List Title

This is a definition list division.

Ordered List

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

Unordered List

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

Semantic List

Lists that are lists and need to look like lists, but you don't want it to have dot points or other markers.

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

[Top]

Horizontal rules

Use HR's to divide up page content. The HR button is provided in the default content editor toolbar.
 

[Top]

Tabular data

Tables should only be used for tabular data or date that requires an inherit relationship between different cells. Avoid merged cells as these can cause issues for screen readers. Use table header cells and scope attributes to help your users navigate and understand the table semantically.

[Top]

Code

P R E F O R M A T T E D T E X T ! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~

[Top]

Inline elements

This section has been added to verify that all available inline styling tags have been accounted for and look correct.

[Top]

Embedded content

Images

This section describes several different methods that you can use to insert images in to the page. Images should only be added where they assist the user to understand the content. Images should not be added for decoration only. This increases page download size and slows down the user experience.

Vanilla image

Floated images

You can add the class float-left or float-right to wrap the content of the page around an image. Use the class clear to clear an element underneath any floated content.

Note: These examples use figures so that you also get the captions. If you don;t need captions, these classes will also work directly on img tags or any other elements.

Example:

<figure class="float-left"><img alt="Image alt text" data-entity-type="" data-entity-uuid="" src="http://placekitten.com/420/420" />
<figcaption>Image with a caption, floated left with <code>float-left</code>.</figcaption>

Mauris rhoncus aenean vel elit scelerisque. Euismod lacinia at quis risus sed vulputate odio ut enim. Et tortor consequat id porta nibh venenatis. Porttitor lacus luctus accumsan tortor posuere ac ut consequat semper.

Amet consectetur adipiscing elit pellentesque. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Imperdiet sed euismod nisi porta lorem mollis aliquam ut. Tortor aliquam nulla facilisi cras fermentum odio. Quis hendrerit dolor magna eget est.

Sodales neque sodales ut etiam sit amet nisl purus. Amet venenatis urna cursus eget nunc scelerisque. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. In ornare quam viverra orci. Imperdiet dui accumsan sit amet nulla facilisi morbi.

Faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Proin fermentum leo vel orci porta non pulvinar. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat velit. Ornare arcu odio ut sem nulla pharetra. Eros in cursus turpis massa tincidunt dui. Varius sit amet mattis vulputate enim nulla aliquet porttitor

Wrapped in a <figure> element, no <figcaption>

Wrapped in a <figure> element, with a <figcaption>

In a <figure> element, with a hidden <figcaption> to support more complex images with complex descriptions that you don;t want to show to users

<figure><img src="http://placekitten.com/820/520" />
<figcaption class="sr-only">
<p>This is an extensive description of the image.</p>
<ul>
<li>You can include lists!</li><li>You can include lists!</li><li>You can include lists!</li><li>You can include lists!</li><li>You can include lists!</li></ul></figcaption>
</figure>

[Top]

Code or code examples

Including code examples or snippets is done using one of the following methods. Which one you choose will depend on the context, but all are valid. For optimal accessibility use the figure method with captions.

Inline preformatted code

This sentence includes some <figure> references

In a <figure> element, without a <figcaption>

<figure>
<pre>
	// there's no caption so this should be pretty obvious
	var b = b + c;
  </pre>
</figure>

	// there's no caption so this should be pretty obvious
	var b = b + c;
  

In a <figure> element, with a <figcaption>

<figure>
<pre>
function NavigatorExample() {
  var txt;
  txt = "Browser CodeName: " + navigator.appCodeName + "; ";
  txt+= "Browser Name: " + navigator.appName + "; ";
  txt+= "Browser Version: " + navigator.appVersion  + "; ";
  txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
  txt+= "Platform: " + navigator.platform  + "; ";
  txt+= "User-agent header: " + navigator.userAgent  + "; ";
  console.log("NavigatorExample", txt);
}
  </pre>
<figcaption>Get browser details using <code>navigator</code>.</figcaption>
</figure>

function NavigatorExample() {
  var txt;
  txt = "Browser CodeName: " + navigator.appCodeName + "; ";
  txt+= "Browser Name: " + navigator.appName + "; ";
  txt+= "Browser Version: " + navigator.appVersion  + "; ";
  txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
  txt+= "Platform: " + navigator.platform  + "; ";
  txt+= "User-agent header: " + navigator.userAgent  + "; ";
  console.log("NavigatorExample", txt);
}
  

iframe

[Top]

This is the plain content component. Use this for most generic information.