Style Guide


When uploading a Feature image you can add a caption like this

When uploading a Feature image you can add a caption like this

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.

Pease note, although the CMS is mentioned this is not a CMS guide on how to update your site, please refer to your printed or web based CMS guide for information regarding this.

//// Start guide


Heading One

Heading Two

Heading Three

Heading Four

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

H1 Headings are normally created by completing the page heading field in the CMS. There should only be one H1 on any page, however you can have as many h2, h3, h4 etc as required. Note that H1's are automaticaly created blue.

This is a sub heading H2

H2 headings can normally be created within a content edit field via the fields toolbar drop down.

This is a sub heading H3

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!

Single feature image

All sub pages have a feature image option. Use this to quickly add an image to the top of any page. Feature images are landscape and sit just below the H1 (heading #1) at the top of the page. Using a feature image is the preferred way of adding images to a page.

Supporting images

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.

Your website images use the following dimensions 770px × 450px.

The CMS (Proceswire) will attempt to crop down your images as you embed them into a page. However, if you have the time it is better to pre-crop your images before uploading them to the CMS.

  • You can also crop images via the CMS, see your CMS guide for more information.
  • Images that are low quality or not used correctly will reduce the value of your copy and ultimately your message.

Images left, right or centered?

Images with a width of 770px will sit in the middle of the 'content column' (as above) and take up the full width of the space. This is the default position. Images can be aligned to the left or the right by using the 'Styles' drop-down menu on the editor toolbar. If you aligned a landscape image to the left or right it will be automatically reduced in size by 50%.

Sometimes images look best aligned to the right (when positioned near bullet points), other times to the left. This often depends on how much copy is available on the page. Image (left/right) alignment is only available in desktop view. On a mobile phone they will take up the default (full width position).

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

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.

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.

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 align it to the right.

Video Media

Video (via Youtube or Vimeo) can be added to any page.

To add video do this …

  1. Find your video on Youtube or Vimeo
  2. Click on the 'share' button/link
  3. Copy the last part of the url, it looks something like this It4WxQ6dnn0
  4. Log into the CMS and go to your page
  5. Paste the code into your content edit field in the place you want the video to appear

Linking 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)

It's also a good idea to open PDF's in a new window. See CMS guide for details.

End of style-guide ///


Scroll to Top