Skip to content ⤶ Skip to footer ⤶

Style Guide

This is a temporary page detailing some of the available page patterns, we will deactivate it before the site goes live.

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.

Templates and Patterns

We will use these templates and patterns to populate your site with content. View the website map.

1: Templates

The page you are looking at now is a page with a FULL WIDTH TEMPLATE.

Pages can also be presented with a SIDEBAR template like this. When a SIDEBAR template is used a sub menu is displayed in the right hand column.

2: Patterns

Below are vaious PATTERNS that we can use to present your content. These patterns can be used in both types of templates.

The only caveat is that the the WIDE PAGE IMAGE pattern (see below) is only available if a FULL WIDTH TEMPLATE is used.

Text grid (pattern)

Using "click here" as link text may seem simple, but it’s actually harmful for both usability and accessibility. Link text should provide clear information about what users can expect when they follow it. "Click here" offers no context, forcing users to read surrounding text to understand its purpose. Descriptive link text like "Learn more about accessibility guidelines" is far more informative.

Using "click here" as link text may seem simple, but it’s actually harmful for both usability and accessibility. Link text should provide clear information about what users can expect when they follow it. "Click here" offers no context, forcing users to read surrounding text to understand its purpose. Descriptive link text like "Learn more about accessibility guidelines" is far more informative.

Using "click here" as link text may seem simple, but it’s actually harmful for both usability and accessibility. Link text should provide clear information about what users can expect when they follow it. "Click here" offers no context, forcing users to read surrounding text to understand its purpose. Descriptive link text like "Learn more about accessibility guidelines" is far more informative.

Using "click here" as link text may seem simple, but it’s actually harmful for both usability and accessibility. Link text should provide clear information about what users can expect when they follow it. "Click here" offers no context, forcing users to read surrounding text to understand its purpose. Descriptive link text like "Learn more about accessibility guidelines" is far more informative.

Zig Zag (pattern)

Heading

Single image left (desktops) text on the right

Using "click here" as link text may seem simple, but it’s actually harmful for both usability and accessibility. Link text should provide clear information about what users can expect when they follow it. "Click here" offers no context, forcing users to read surrounding text to understand its purpose. Descriptive link text like "Learn more about accessibility guidelines" is far more informative.

This lack of context also poses significant accessibility issues. Screen readers often list links out of context, so a link labeled "click here" becomes meaningless to visually impaired users. Descriptive links help them navigate efficiently and understand the content without confusion.

Heading

Single image right (desktops) text on the left

Using "click here" as link text may seem simple, but it’s actually harmful for both usability and accessibility. Link text should provide clear information about what users can expect when they follow it. "Click here" offers no context, forcing users to read surrounding text to understand its purpose. Descriptive link text like "Learn more about accessibility guidelines" is far more informative.

This lack of context also poses significant accessibility issues. Screen readers often list links out of context, so a link labeled "click here" becomes meaningless to visually impaired users. Descriptive links help them navigate efficiently and understand the content without confusion.

Timeline (pattern)

Page Gallery (Pattern)

Images can have long captions, Cu aeque cotidieque pri, duo an dico eros wisi, eu sea esse facilisi mediocrem. Prodesset appellantur mel ne, eam at expetenda efficiendi. Cu aeque cotidieque pri, duo an dico eros wisi, eu sea esse facilisi mediocrem. Prodesset appellantur mel ne, eam at expetenda efficiendi.
Images can have captions
Images can have captions
Images can have captions
Images can have captions

Box outs or muted Columns (pattern)

Using "click here" as link text may seem simple, but it’s actually harmful for both usability and accessibility. Link text should provide clear information about what users can expect when they follow it. "Click here" offers no context, forcing users to read surrounding text to understand its purpose. Descriptive link text like "Learn more about accessibility guidelines" is far more informative.

This lack of context also poses significant accessibility issues. Screen readers often list links out of context, so a link labeled "click here" becomes meaningless to visually impaired users. Descriptive links help them navigate efficiently and understand the content without confusion.

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

Muted columns, with first col used to embed YouTube video (pattern)

A video description can go here.

Heading

Prodesset appellantur mel ne, eam at expetenda efficiendi. Cu aeque cotidieque pri, duo an dico eros wisi, eu sea esse facilisi mediocrem. Prodesset appellantur mel ne, eam at expetenda efficiendi. Cu aeque cotidieque pri, duo an dico eros wisi, eu sea esse facilisi mediocrem. Prodesset appellantur mel ne, eam at expetenda efficiendi. Cu aeque cotidieque pri, duo an dico eros wisi, eu sea esse facilisi mediocrem. Prodesset appellantur mel ne, eam at expetenda efficiendi.

Full width page image (pattern) Used only with a FULL WIDTH TEMPLATE

This lack of context also poses significant accessibility issues. Screen readers often list links out of context, so a link labeled "click here" becomes meaningless to visually impaired users. Descriptive links help them navigate efficiently and understand the content without confusion.

Accordion (pattern)

  • Why is using 'click here' for links is a bad idea?

    Answer: This lack of context also poses significant accessibility issues. Screen readers often list links out of context, so a link labeled "click here" becomes meaningless to visually impaired users. Descriptive links help them navigate efficiently and understand the content without confusion.

  • Q2

    Answer

Two columns, one with images, the other with text (pattern)

Images can have long captions, Cu aeque cotidieque pri, duo an dico eros wisi, eu sea esse facilisi mediocrem. Prodesset appellantur mel ne, eam at expetenda efficiendi. Cu aeque cotidieque pri, duo an dico eros wisi, eu sea esse facilisi mediocrem. Prodesset appellantur mel ne, eam at expetenda efficiendi.
Images can have long captions, Cu aeque cotidieque pri, duo an dico eros wisi, eu sea esse facilisi mediocrem. Prodesset appellantur mel ne, eam at expetenda efficiendi. Cu aeque cotidieque pri, duo an dico eros wisi, eu sea esse facilisi mediocrem. Prodesset appellantur mel ne, eam at expetenda efficiendi.
Images can have long or short captions
Images can have long or short captions

A heading

Prodesset appellantur mel ne, eam at expetenda efficiendi. Cu aeque cotidieque pri, duo an dico eros wisi, eu sea esse facilisi mediocrem. Prodesset appellantur mel ne, eam at expetenda efficiendi. Cu aeque cotidieque pri, duo an dico eros wisi, eu sea esse facilisi mediocrem. Prodesset appellantur mel ne, eam at expetenda efficiendi. Cu aeque cotidieque pri, duo an dico eros wisi, eu sea esse facilisi mediocrem. Prodesset appellantur mel ne, eam at expetenda efficiendi.

Cu aeque cotidieque pri, duo an dico eros wisi, eu sea esse facilisi mediocrem. Prodesset appellantur mel ne, eam at expetenda efficiendi. Cu aeque cotidieque pri, duo an dico eros wisi, eu sea esse facilisi mediocrem. Prodesset appellantur mel ne, eam at expetenda efficiendi. Cu aeque cotidieque pri, duo an dico eros wisi, eu sea esse facilisi mediocrem.

Prodesset appellantur mel ne, eam at expetenda efficiendi. Cu aeque cotidieque pri, duo an dico eros wisi, eu sea esse facilisi mediocrem. Prodesset appellantur mel ne, eam at expetenda efficiendi. Cu aeque cotidieque pri, duo an dico eros wisi, eu sea esse facilisi mediocrem.

Prodesset appellantur mel ne, eam at expetenda efficiendi. Cu aeque cotidieque pri, duo an dico eros wisi, eu sea esse facilisi mediocrem. Prodesset appellantur mel ne, eam at expetenda efficiendi. Cu aeque cotidieque pri, duo an dico eros wisi, eu sea esse facilisi mediocrem.

Resource Lists (pattern)

Resource 1

Using "click here" as link text may seem simple, but it’s actually harmful for both usability and accessibility. Link text should provide clear information about what users can expect when they follow it. "Click here" offers no context, forcing users to read surrounding text to understand its purpose. Descriptive link text like "Learn more about accessibility guidelines" is far more informative.

Resource 2

This lack of context also poses significant accessibility issues. Screen readers often list links out of context, so a link labeled "click here" becomes meaningless to visually impaired users. Descriptive links help them navigate efficiently and understand the content without confusion.

Resource 3

Using "click here" as link text may seem simple, but it’s actually harmful for both usability and accessibility. Link text should provide clear information about what users can expect when they follow it. "Click here" offers no context, forcing users to read surrounding text to understand its purpose. Descriptive link text like "Learn more about accessibility guidelines" is far more informative.

This lack of context also poses significant accessibility issues. Screen readers often list links out of context, so a link labeled "click here" becomes meaningless to visually impaired users. Descriptive links help them navigate efficiently and understand the content without confusion.

A row of images (pattern)

Embed field (pattern)