Components

Guidance on using components on NHS inform

Action link

You should use an action link to move users to the next step of their journey. Do not use it to signpost the user to further information.

It should start with a verb. For example ‘Find your nearest GP practice’.

Where possible, phase out the old call to action component in favour of an action link.

Example:

General rules for using care cards

There are some general rules that you should apply to all care cards.

Symptoms

You should include symptoms in the care card itself. Try to avoid repeating symptoms in the body of content above or below the care card.

Caveats

Include any any extra caveats before or after the bullet points in a care card. For example you should put ‘If your GP is closed, phone 111’ below the bullet points, not in the heading.

Care card: Non-urgent (blue)

Use a blue care card when you want users to get in touch with a non-urgent healthcare professional. For example their GP practice.

The title for a non-urgent care card should be as short as possible. It should be in the format:

‘[VERB] your [HEALTHCARE SERVICE] if:’

For example:

‘Speak to your GP practice if:’

Example:

Care card: Urgent (red)

You should use an urgent care card (red) when you want users to get urgent help quickly.

The title for a urgent care card should be as short as possible. It should be in the format:

‘[VERB] [HEALTHCARE SERVICE] if:’

For example:

‘Phone 111 if:’

If needed, put ‘If your GP is closed, phone 111’ below the bullet points, not in the heading.

Example:

Care card: Emergency (grey and red)

You should use an emergency care card (grey and red) when users need to get emergency help now. For example phone 999 or go to A&E.

The title for an emergency care card should be as short as possible. It should be in the format:

‘[VERB] [HEALTHCARE SERVICE] if:’

For example

‘Phone 999 if:’

Example:

More examples of an emergency care card

Details

You should use a details component for content that only a minority of users need to know.

Example:

Do and don’t lists

Do and Don’t lists to help users understand more easily what they should and shouldn’t do.

You should use them to give users clear and simple advice. For example about treating a problem themselves.

How to write a Do or Don’t list

When writing Do and Don’t lists, use the same rules as you would for bulleted lists. For example use lower case at the start of each bullet and don’t use full stops within bullet points. Where possible start another bullet point or use commas or dashes to expand on an item.

You do not need a lead in line for Do and Don’t lists.

You should start every item in a Don’t list with ‘do not’. This helps screen readers as otherwise they would not read out a ‘do not’ at the beginning of each list item. This would be a risk.

According to user testing by NHS UK, having a ‘do not’ at the start of each item does not negatively affect the experience of other users.

When not to use a Do or Don’t list

Avoid using a Do or Don’t list if you only have 1 item in the list. You could consider using inset text or a warning callout instead.

Example:

Expander

Expanders allow users to view more information only if they need it. This can make a topic easier to digest.

They can also be used:

  • to include information for a wide audience, unlike the details component
  • when you see a clear user need for them

Alternatives to an expander

Instead of an expander, it may be better to:

  • simplify and reduce the amount of content
  • split the content across many pages
  • keep the content on a single page, separated by headings
  • use a list of links to let users navigate quickly to specific sections of content

Example:

Image

You should only use an image component if it’s essential for illustrative purposes. For example, a skin rash. When illustrating a skin condition, you should include a range of skin tones.

Avoid using images that are only decorative. These increase the length of a page, the time users have to scroll and how many users will reach the bottom of the page.

There are some general rules for using images, including:

  • use landscape images (except on a hub where portrait is available in multi-column panels)
  • avoid flowcharts, intricate diagrams, infographics
  • choose images with very little or no text – show how small images render on mobile view to illustrate the user experience to a content lead, if needed

You should always complete the alt text field for an image. Here you should describe what the picture shows – what a user with sight loss would need to see. For example ‘red and purple spots on ankle’ and not ‘allergic reaction’.

Example:

Note of caution

A note of caution helps information stand out to a user. You should keep them as short as possible.

There are 2 types of note of caution. These are:

  • information – use for temporary information like when guidance and service delivery aren’t yet aligned
  • warning – use if you want information to stand out to a particular group

Example:

Information

Warning

Video

You can use video to help users understand a topic.

Always use a video component for videos. Using HTML code is inaccessible.

Example:

More on components

You can get further advice on using components through the: