The Style Guide

This style guide is designed to aid the styling of elements within the templates and make sure that the majority of possible requirements of most website builds are covered. Each website is different, so not all needs may be met with this guide, but it is able to grow in the future. So when building, make sure that all these elements are styled up appropriately for when they are utilised on the website you are building.

NB. When initially created, this style guide is classified as unstyled.

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Headline 6


Unordered Lists

  • Style the lists as appropriate,
    • but make sure they can be nested
  • so that the flow is not interrupted.

Ordered Lists

  1. Style the lists as appropriate,
    1. Make sure they can be nested
      1. and nested again
    2. Make sure they can be nested
  2. That was easy.

Cookie Policy

This is an example of how the cookie layout will automatically render so it can be amended.

We use cookies to ensure that we provide you with the best experience on our site. To learn more about how they are used please view our Cookie Policy.

If you continue to browse our website we will assume that you are happy to receive cookies. However, click here if you would like to change your cookie settings.



If the design requires it, this allows some basic CSS driven functionality to have a nice looking tooltip*. Use a class of 'tooltip' with additional appending of 'tooltip-left' or 'tooltip-right' dependent on needs.

.tooltip .tooltip-Left .tooltip-right


Styling of the <blockquote> tag if quotes are utilised within the design.


Code - wrap with a <pre> tag if you would like to keep layout, although do think about how this will work responsively.



All buttons require the class of 'button' and then additional classes as per requirements. Most contrasting call to action colour would be primary and this would filter down based upon the design. Delete classes as appropriate.

.button .button-primary .button-secondary


To alter format and sizing of buttons, use these classes. Delete classes as appropriate.

.button-large .button-small .button-full


Generic Alert box to show helpful information
Success alert box to signal success interaction
Warning alert box to warn of potential problems
Error alert box to show something has gone wrong


Dropdowns have a basic structure. Container with a class of 'dropdown', a child <a> and a <div>. The <a> has an href attribute of the id of the child <div>. The 'dropdown' class allows for functionality on touch devices.


Tables should have markup as below. This allows the Footable plugin to make it work responsively. Certain columns columns can be hidden with the 'data-hide' attribute on the initial <th> in the <thead> based upon the breakpoints set within the 'common.js' file Has ability to add Sorting, Filtering & Pagination

Title1 Title2 Title3 Title4
Data1 Data2 Data3 Data4
Data1 Data2 Data3 Data4

Tabs to Mobile Accordions

Initially rendered as separate items, javascript generates a new layout. Initial layout* of on desktop is a tab system, but once a breakpoint is achieved, the layout should change to an accordion. Multiple can be used on a page.

Tab 1

Tab 1 content

Tab 2

Tab 2 content

*Must add additional layouts. MC


Same as a mobile tab/accordion layout. Styling will need to be updated similar to Accordions in Tabs to Mobile Accordions. Multiple can be used on a page. Set an "data-independent" attribute to "true" if you would like other sections to be independent of the current one. If not required, this can be removed.

Accordion 1

Accordion 2 content

Accordion 2

Accordion 2 content

*Must merge funtionality and styling with Tabs to Accordions. MC


When creating a form use this layout.


Below are some examples of an <input> of type="text", textarea and a RadDropDownList. Add a label to each as appropriate, even if not visible in the design (make it invisible with the class of 'visuallyhidden').


Error Summary

At the top of the form, include a summary. A <div> with the class of 'error-summary'. Within the summary, create an unordered list <ul> the fields which have errors. Add an <a> tag to link to the corresponding field or parent <div>. It must include an error message which is consistent with what is next to the field.

Error Notice

After the input label add a <span> with a class of 'error-notice'. Include the same error message as in the summary.

Form Errors

Please enter name