Web pattern library

Descriptions of each design component in use on this website and their correct usage.

Alert component

The 'alertBox' is a message that draws attention to a warning or something of high importance.

What we use it for

We use it where failure to comply with the warning could lead to a fine or danger to the person. For example, where the customer might get a parking ticket. 

We use bold for emphasis, but it is kept to a minimum.

What we don't use it for

There should only be one alert box on a page. We don't use this component for system errors. For example, where our online forms are not available.

Example of the alert box component

Warning If you are entering the city from the west, please note that there is a 4.11m (13'6") height restriction at the Botley Road railway bridge.

Box out component

The 'boxOut' component draws attention to detailed extra information.

What we use it for

We use this component to provide additional guidance, such as special instructions for drivers.

The box should have a title. And can include a title, paragraph text, bullet lists and links. 

Example of the box out component

Vehicles weighing more than 7.5 tonnes

If your vehicle's unladen weight is more than 7.5 tonnes, you are not allowed to use the following streets at any time (unless your destination is in these streets).

  • Longwall Street
  • St Cross Road
  • South Parks Road
  • Museum Road
  • Blackhall Road
  • Parks Road between its junction with Keble Road and South Parks Road

Primary button link

A primary 'buttonLink' is the main call to action on a page.

What we use it for

We use the button component to help people carry out an action on an Oxfordshire County Council page like starting an application or moving to the next question in a form.

Write button text in sentence case, describing the action it performs. For example:

  • ‘Start now’ at the start of a smart guide
  • ‘Log in’ to and account the user has already created
  • ‘Send your application’ to submit the user’s application form
  • ‘Pay’ to make a payment
  • ‘Log out’ when a user is logged into an account

What we don't use it for

We don't use the button link for any other type of link.

There will only be one primary button on a page. More than one call to action will reduce the impact and make it harder for people to know what to do next.

Example of the primary button

Start now

Secondary button link component

A secondary 'buttonLink' acts as a secondary call to action on a page.

What we use it for

We use the secondary button where there is a primary button for the main call to action. We use secondary buttons where several calls to action are on a page, all with equal importance.

Example of the secondary button

Back

Download link component

The download link component draws attention to a document available for download.

What we use it for

We use this component for important documents that may be lost in a paragraph of text. The link text shows the file extension and file size. We may use the component more than once on a page.

What we don't use it for

We don't use the document link component in lists of documents. The component will lose impact if overused.

Example of the download component

Info box component

The 'infoBox' component is used to draw attention to a small piece of extra information without breaking the main content's flow.

What we use it for

We use this component to display extra information related to the surrounding content. We use it for notes that may apply to some or all of the readers.

Example of the info box component

You'll need access to an email account to apply online. Need help setting up an email account? 

Shout component

We use the 'Shout' component is to emphasise a small piece of non-instructional content.

What we use it for

We use the shout component to draw attention to something positive. For example, a quote or a question from a customer. It should be a single sentence used for editorial content rather than for warnings or notices.

Example of the shout component

'I work full time, can I still foster?'

System message

We use a system message to tell users about something that affects a service or part of a service. 

What we use it for

We use the 'warning' message to tell the user about a service that is temporarily unavailable. For example, when the online forms are not working.

We use the 'info' message to tell users about something that is happening in the future, or for something that has changed. For example, where the opening hours for a library is changing or has changed.

The website system uses the error message to show something has gone wrong. The system uses the 'success' message to show something has worked.

Example of the warning message

Online forms not available

We are having problems with our online forms. We are working on a fix.

Example of the info message

Changing opening hours

The opening hours for Abingdon Library are changing on 23 June 2020. See the new timetable below.

Example of the error message

Error message

Something has gone wrong.

Example of the success message

Success message

The thing you were doing has worked.

Accordion component

The accordion component lets users show and hide sections of related content on a page.

What we use it for

We use the 'accordion' component for supplementary information that is not the main focus of the page. It may be content that isn't essential to all users but might be useful to some.

Example of the accordion component

Learn more about accordions

With an accordion, you can show and hide content.