Web pattern library
Descriptions of each design component in use on this website and their correct usage.
On this page
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
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
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
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 page's primary focus. It may be content that isn't essential to all users but might be useful to some. For example, we use the accordion for the transcripts that accompany videos.
Example of the accordion component
Learn more about accordions
With an accordion, you can show and hide content.