Design components style guide

We use different features in the content management system (CMS) to help ensure that content is presented in a consistent way.

This guide is about how to use the features, when to use them and when not use them.

Inlines

CTA Box

These are the boxes at the top of some landing pages such as parking and recycling and rubbish.

Example cta box

Images

Avoid unnecessary decoration. Only use images if there's a real user need.

All images need to be approved for use by the digital team, digital@nfdc.gov.uk

Jumplist

This is to be used when you have a page that has the need for more than 3 or 4 heading 2s.

A jumplist will automatically pick up all of the heading 2s on the page and display them as a list.

Leave the 'you may enter some text' field blank and it will automatically display the text 'On this page'.

Example jumplist

Styles

Important block

Use the important block style when you have a clear and important message for users.

It shouldn't be too long and watch out for the formatting of your text, as this style is not built to contain too many words or formatting.

Example important block

Our phone lines are currently unavailable. Please see our contact us page for other ways to get in touch.

Document block

Use the document block style to highlight any key documents such as application forms or policies.

Example document block

Boatman licence application form (PDF, 139 KB)

CTA link green

Call to action (CTA) buttons allow important links to stand out from other content on a web page.

Use this style to:

• link to a form or process
• highlight one important task, for example signing up for garden waste

Do not use this style

• if the link is longer than 35 characters. Instead, create an inline text link.
• more than once per section? page? Using more than one weakens the visual importance created by CTA buttons. For secondary links, create inline text links.

Example cta link green

CTA link orange

Call to action (CTA) buttons allow important links to stand out from other content on a web page.

Use this style to:

• link to a task or form on another website such as GOV.UK
• link to another landing page or section such as 'more news'

Do not use this style

• if the link is longer than 35 characters. Instead, create an inline text link.
• more than once per section? page? Using more than one weakens the visual importance created by CTA buttons. For secondary links, create inline text links.

Book your covid vaccine on NHS.co.uk

Page elements and structure

Intro text

Do not use the intro text section. This makes all the text bold and hard to read for some users.

Summary text

This should be used to summarise your page and is what is picked up by landing pages and search engines such as Google.

Sub-headings

If you have a page with several paragraphs, organise the paragraphs with sub-headings. These should indicate what the paragraph is about. This helps users scan page content for what they are looking for.

Headings - H2, H3, H4

Use the following headings to structure your page:

• heading 2 for section headings
• heading 3 for subheadings under a heading 2 section
• heading 4 for subheadings of a heading 3 section

A lot of elements are involved in designing content presentation on a page, or across multiple pages.

This guidance is based on the Readability Guidelines.

Paragraphs

Divide content up into short paragraphs. Chunked content is easier to absorb as smaller units of content are easier to process, understand and remember. Text divided into distinct visual units helps users scan. 

Bullet points

Use bullet points to split up long sentences.

They should:

• complete a sentence,
• be front-loaded with the most important information,
• start with the same language element, like verb, noun, adjective,
• be grammatically correct

Tools

A content tool is content that users interact with in ways other than reading.

Examples:

• Calculator, Money Savings Expert website 
• Birth date eligibility checker, GOV.UK website
• Date picker, Easyjet website

These examples are all inclusively designed.

Images, infographics and videos

If you decide to present content as images, infographics and videos, make sure it is inclusively designed:

• images, use alt text if the image contains useful information
• infographics, provide a text version of the infographic
• videos, provide captions on the video and a full transcript

Tables

Only use tables for data.

If you use a table, make it accessible and use appropriate markup.

Do not use a table to display non-data content or to improve the page layout.

If you do use a table do not copy and paste from another document, use the table function in Goss.

Choose the 'dark' style and make sure you add a caption for the table.

Page templates

We use 3 page templates:

• Cruise home
• list
• default

Cruise home is only to be used for our homepage.

List template is to be used for landing pages such as residents

Default is the template for content pages such as paying rent