Standard components

We use components in different combinations to create the website:

• hyperlinks
• tables
• bulleted lists
• anchoring
• warning panel
• inset text
• related articles
• contact card
• standard CTA (primary button)
• standard CTA (primary and secondary button)
• district CTA
• single CTA button
• accordion 
• webdoc
• guide

Articles are designed to be a basic level of web content, so the components you can add are deliberately limited. 

Hyperlinks

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 the Dorset Council 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.

Tables

We use tables on our website to display information like opening times.

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

Bulleted 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:

• red
• blue
• green

Numbered lists

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:

1. check if you are eligible
2. make sure you have your documents ready
3. fill out our online application form

Anchoring

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.

Anchor link to the top of this web page.

Warning panel

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.

Inset text

Use the inset text component to differentiate a block of text from the content that surrounds it, for example:

• quotes
• examples
• 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.

Related articles

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).

Contact card

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.

Standard CTA (primary button)

Standard CTA (primary and secondary button)

District CTA

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). 

Single CTA button

Used to direct the user to a process, such as the start of a form they need to complete.

Start now

Accordion

We developed this component based on the Government Digital Service (GDS) accordion used on GOV.UK. The accordion component lets users show and hide sections of related content on a page.

Find an example of an accordion on our Dorset on-street residential parking permit zones page.

Webdoc

Our webdoc component is an accessible alternative to PDF documents that would have been used for policies, reports or strategies. A webdoc is a HTML long form template, or HTML document. It has the option to download a PDF or print the page. It displays the full document in an accessible format and chapters.

Find an example of a webdoc on our Dorset Blue Badge Car Park Charging Policy page.

Guide

Our guide component lets users go step by step through a process, with a contents and 'next' button. It is based on the step by step navigation developed by GDS.

You can find an example of a guide on our starting secondary or upper school in Dorset page.