We use components in different combinations to create the website:
- bulleted lists
- warning panel
- inset text
- related articles
- contact card
- inline map
- standard CTA (primary button)
- standard CTA (primary and secondary button)
- district CTA
Articles are designed to be a basic level of web content, so the components you can add are deliberately limited.
There are two kinds of hyperlinks:
- internal links send users to another page on www.dorsetcouncil.gov.uk
- external links send users to another website, or an Achieve form
It's really important that hyperlinks are always meaningful out of context, so a link that reads properly for someone using assistive technology. Using 'click here' is bad practice.
Here is an internal link to the homepage of this website. Internal links should open in the same window.
Here is an external link to the central Government website, Gov.uk. This type of link no longer has a symbol to indicate to users that they'll be leaving this website. External links also open in the same window.
Best practice tip - Front load your links if you can, this means they will look good on the page, especially on mobile phones, for example:
Gov.uk is the central Government website for the UK.
We use tables on our website to display information like opening times.
|Monday||9am to 5pm|
|Tuesday||8:30am to 4pm|
|Wednesday||12 noon to 3pm|
|Thursday||9:15am to 5:30pm|
Sometimes it makes sense to use tables, but we try to avoid very large tables if we can because they are hard to read on mobile phones.
Tables should only be used to display data rather than organise other sorts of content, such as images.
Tables need to carry a caption to help people using assistive technology to identify the overall purpose of a table
Bulleted and numbered lists
We use bulleted lists to help organise information on a page, and get to the point more quickly. Lists should always have a leading sentence. We don't put full stops at then end of bullets.
My favourite colours are:
We use numbered lists when we are describing a step-by-step process, or the items are in chronological order.
To apply for a disabled parking Blue Badge you must:
- check if you are eligible
- make sure you have your documents ready
- fill out our online application form
Anchoring is another type of link we use on web pages. When a user clicks on an anchor link it 'skips' them to another part of the same web page. This feature is useful on longer web pages when the user might want to quickly reach a particular part of information without scrolling.
Use a warning panel when you need to warn users about something important, such as legal consequences of an action, or lack of action, that they might take. This can be added by highlighting text and selecting 'GDS Warning Panel' on the right of the toolbar.
Use the inset text component to differentiate a block of text from the content that surrounds it, for example:
- additional information about the page
Some users do not notice inset text if it’s used on complex pages or near to other visually prominent elements. For this reason, avoid using inset text as a way of highlighting very important information that users need to see.
If you need to draw attention to very important content, like legal information, use the warning panel feature instead.
To the right you can see an example of the Related articles feature, which can add links to any other asset on the site (but not external links).
The contact card component is how we display contact information on the website. Often they are at the bottom of a web page, but they can be placed anywhere within the page.
Inline maps are used to show the location of one place geographically. This has a search interface to find the location and add a pin for you
When adding in an Article you need to specify the height (in pixels) and the zoom factor. This example is Height: 400, Zoom: 15
Standard CTA (primary button)
Go to the Dorset Council homepage
The button will take you to our homepage. The button text should clearly and concisely describe the action, such as 'start now', 'apply now', 'sign up' or 'find out more'.
Standard CTA (primary and secondary button)
Go to the Dorset Council homepage or sitemap
The button will take you to our homepage. The button text should clearly and concisely describe the action, and clearly differentiate between the two buttons/home
This component provides a user with a Call To Action button specific to the location they live in, and uses an address search to determine the region (based on previous District Council boundaries).