×

This is a call out panel

This is an optional field with a limited editing toolbar. It is used to make an announcement or catch the visitors eye. If this field is left empty nothing will be shown.

Hide this panel (until next visit) by clicking on the 'x'.

Style Guide

This is a 'Feature Image' and is the preferred way of adding an image to a page.

This is a 'Feature Image' and is the preferred way of adding an image to a page.

All websites are designed to follow a ridged set of style rules, these rules determine style and consistency, they apply to desktop and mobile browsers/devices alike. Without these rules the site would lose balance, coherence and ultimately its value.

Heading Two

Heading Three

Heading Four

Heading Five

Headings need run down a page like this H1, H2, H3, H4.

Important. Only use H1, H2, H3 etc for headings and sub headings . Don't use headings for whole paragraphs.

Don't make headings (h1, H2, H3 etc) bold, they have already been styled!

Supporting images

A pullquote. These work well if there is large body of text on the page, don't use them near images, lists or other quotes!

Images (within content) are used to support your carefully crafted copy. Only add an image if it adds real value to a page.

Use your images carefully, only use images that are high quality , they will work best if they are cropped in landscape. Images in portrait work best aligned left or right allowing some text to wrap and them.

Tip. Images that are low quality or not used correctly will reduce the value of your copy and ultimately your message. They also run the risk of making the reader perceive the site and ultimately the organisation negatively.

Images left, right or centered?

This is a 'Feature Image' and is the preferred way of adding an image to a page.Care must be taken when using images within or alongside text. Short, simple paragraphs work best.

If several images are used on the same page it can be effective to alternate their position. Images do not generally work well if they are placed underneath each other.

Ideally paragraphs should be kept short with one or two messages per paragraph. Research has shown that people find it much easier to read web-sites and pick out the relevant information if there is a good balance between content and background space.

Text

This is a short simple paragraph.

This is another paragraph, note the line balance and spacing of the paragraphs. This paragraph is slightly longer than the extremely brief paragraph above which would be used to highlight a key piece of information. This paragraph would then be used to expand upon and reinforce the key message that would have been shown above.

Paragraphs that are short are much easier to read and make the page appear more balanced, considered and professional. Care must also be taken to use clear and concise language avoiding the use of jargon wherever possible. If jargon has to be used then it should be done so in context so that the reader can understand it as meaningless content will drive people away.

Image description

This is a "filler" paragraph to provide some content under the above large image. Pages can look unfinished if images appear at the bottom of the page without any accompanying text. Similarly images should not be used randomly without any context. Minimum requirement is for an informative accompanying title that explains the relevance of the image.

This is a line of text with a ...
breakspace.

To create a breakspace use Shift/Return on your keyboard.

A simple bulleted list

  • Oranges
  • Apples
  • Bananas

Another list, this time numerical

  1. Oranges
  2. Apples
  3. Bannanas

Turn a link into a button!

Here's a simple text link.

This time it's a button

See documentation on how to achieve this.

Video Media

Add video to any page by simply placing the video's URL into the CMS editor window.