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
• inline map
• 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.