Menu  

Style Guide

This is a feature image.

This is a feature image.

This is a H1 heading, all pages should start with a heading, note that there is no full stop after headings

Headings are created by completing the 'page heading' field in the CMS.

This is a sub heading (H2)

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 it's value.

Please note ...

  • This is not a how to update the site guide, please refer to the printed CMS guide for information regarding this.
  • Be aware that this page contain lots of intentional "Lorem Ipsum" dummy text.

Images (landscape)

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 and the right dimensions, they will work best if they cropped in landscape.

Illustrations images that take up the full column space need to be at least 635px wide -770px is best. As the height for illustrations vary there is no height restriction.

Note, images with a larger width than 770px will be resized dond during upload.

Images that are low quality or not used correctly will reduce the value of your copy and ultimately your message.

Content images left, right or centred?

Images can be aligned to the left or the right (when placed in the main content column) by using the the 'Styles' drop-down menu on the editor toolbar. When images are aligned to the left or right they are automatically reduced in size.

Sometimes images look best aligned to the right (when positioned near bullet points for example), other times to the left. This often depends on how much copy is available on the page.

By default, images (wider than 770px) will take up the full width of the content column.

* Image (left/right) alignment is only available in desktop view.

Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.

Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.

Text

This is a short simple paragraph.

This is another paragraph, note the line balance and spacing of the paragraphs.

This is a line of text with a ...
break-space.

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

The following is a blockquote. Use 'Blockquote' (via drop down) on any selected paragraph. Block quotes are typically used to highlight a block of text.

Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.

This is a smaller Heading H3

This is some sample text displaying some simple formatting. Bold Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Italics etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.

Important. Only use H1, H2, H3 etc for headings don't use headings for whole paragraphs.

Don't make headings (h1, H2, H3 etc) bold! // Don't use heading for a hyper link - visitors will confuse them with headings.

If you want to create a simple but eye catching link, use a blockqote like this ...

My important link

A simple bulleted list

  • Oranges
  • Apples
  • Bananas

Another list, this time numerical

  1. Oranges
  2. Apples
  3. Bannanas

Tip: If you want to add an image near a list (like above) - align it to the right.

Very small text

Text can be made small by using the SMALLTEXT class via the STYLES dropdown.

Bold or Italic

Use Italic when the text needs to convey emphasis.

Use Bold to show text or phrase importance i.e. warning text, error text, instructional text etc.

File names

All files, images, pdf, MS-Word etc will be automatically saved (during upload) in lowercase and with-out-spaces.

Links to files

It's good practice to let your visitors know file size, especially if they are using a mobile device, example.

Download: name_of_file (1MB)

Its also a good idea to open PDF's in a new window.

Remember many visitors to your site will be mobile users

This site has been designed to adapt/respond to various screen resolutions, if you follow the above suggestions/guidelines your website will continue to function and display content correctly across a wide range of devices.

End of style-guide ///