Skip to main content
Design system

Beta This is a new service. Your feedback will help us improve it.

Cards

Updated in October 2026

Use a card to visually group related content and actions to help users do what they need to more quickly.

Open this example in a new tab
10 Applicants

When to use cards

Use a card to give users a brief summary of content or a task, often with a link to more detail. You can display a card alongside other cards to group related content or tasks.

Use clickable cards to signpost groups of related content and help users find what they need.

You can use a basic, non-clickable card on content pages to provide some visual structure. It may help users scan information more easily.

When not to use cards

Do not use a card to highlight content on a page of long form content.

Before using a card, consider using:

How to use cards

Make cards easy to scan for relevant and actionable information.

You can include multiple elements, such as a title, text, an image and links. If you include a link, the link should mirror the heading of the page it links to.

Accessibility

Heading level and size

Use headings correctly to reflect the page structure. Learn more about how to use headings correctly in the NHS England Design System.

If you need to, change the level of the heading. This supports WCAG 2.2 Success Criterion 1.3.1 Info and Relationships, level A.

Here's an example of replacing the default l (or h2) heading with an m (or h3).

Open this example in a new tab

Heading level m

Card description text goes here.

You can change the size of the heading using heading typography styles.

Open this example in a new tab

Heading level l

Card description text goes here.

Heading level m

Card description text goes here.

Heading level s

Card description text goes here.

Source

Learn more about Cards in NHS England Design System.

Follow discussions about Cards on NHS England GitHub to see the latest updates and resolved issues.

Back to top

Cards variants

Clickable cards

Top task card

Open this example in a new tab

Manage appointments

View, change or cancel your upcoming appointments.

Open this example in a new tab

Order a repeat prescription

Use top task cards to help users quickly access important information or common tasks.

Place them near the top of a page, above other cards or navigation options.

Only use top task cards for content or services that users need most often. They should provide a clear shortcut to high-priority information.

Use no more than three top task cards on a page.

Card with chevron

Open this example in a new tab

Manage appointments

View, change or cancel your upcoming appointments.

The chevron icon helps users know the card will take them to more content. The size of the card helps these links be more frequently noted or more important than other topics signposted by secondary links.

There is only a clickable version of this card.

Card with an icon

Open this example in a new tab

Manage appointments

View, change or cancel your upcoming appointments.

Use a card with an icon when you help users quickly recognise a category, action or type of content by sight. Icons support scanning and can make it easier for users to differentiate between similar topics. Always pair icons with clear labels — icons should support understanding, not replace it.

Do not use icons if:

  • the icon does not clearly represent the content
  • the icon adds unnecessary noise or competes with more important content

Card with a stat

Open this example in a new tab
10 Jobs

Use a card with a stat when you help users quickly highlight a key number or metric that helps users understand a status at a glance. This card type is useful when data is central to the task or when a user needs to make a decision.

If you need to, change the level of the heading.

Use these cards to:

  • surface high-value metrics, such as counts, performance indicators or usage figures
  • give a quick overview before directing users to more detailed data or reports

Do not use stat cards if:

  • the number is not directly helpful to the user's task or decision-making
  • the metric is too detailed or requires explanation — in these cases, link to a full page instead

Card with an image

Open this example in a new tab

Manage appointments

View, change or cancel your upcoming appointments.

Only use cards with images if you have evidence that they help your users, for example, where you can show that they motivate users.

Think carefully before using this type of navigation. Image cards take up more space than other navigational page types. This makes it more difficult for users to scan the page and find the information they need.

Using images can also:

  • harm the usability and accessibility of your service
  • make pages slower to load
  • reduce the sustainability of your service
  • make a service look dated and quickly

Non-clickable cards

Basic card

Open this example in a new tab

Current service status

There are no known issues affecting appointment bookings at this time.

Use basic cards to highlight important information within a page. They are not clickable and should not be used for navigation.

Consider using these components, which may be more suitable for highlighting important information within a page:

Non-clickable card with links

Open this example in a new tab

Pont Glas Pharmacy

Heol Celyn, Newport, NP67 6FF
Phone: 01111 111 111
Email: example@wales.nhs.uk

Get directions (opens in Google Maps)

Use the non-clickable card when you are using more than one link.

Adding actions

Open this example in a new tab

Template: Appointment invitation 1

SenderID: NHS Wales Test

(firstName) (lastName), you are due for your blood test. Book your appointment or find out more at http://www.nhs.wales/service-name-invite.

You can add links for one or more actions to a card. This can be helpful when readers need to complete an action. When screen readers read cards out, the card heading, card actions and each action link is read out.

Card actions cannot be used on clickable cards. They can be used in summary cards.

Add a short, relevant and unique card heading which identifies what the card action is. When a screen reader reads out the card heading, the screen reader also reads out each action link.

Write link text that is clear and unique when read out of context. Keep it short and start with more than 3 actions.

Examples of card actions include:

  • delete appointment
  • edit appointment
  • update result
  • approve application
  • cancel order

If the card title includes the word "appointment". For example, only make the words "add" or "delete" the link text if it might apply to more than 1 action.

If a card includes many similar actions, consider adding a warning or asking the user for confirmation.

Grouping cards (card navigation)

Open this example in a new tab

You can group multiple cards to show a collection of related topics.

You should:

  • prioritise the cards so the content users need most comes first
  • use different card styles to help users understand the importance of different groups of links
  • consider using card navigation if users are likely to browsing content rather than looking for something specific

Card navigation displays heightened summary text in over two rows of cards. There are three cards per row on desktop and two cards per row on tablet. On mobile, the cards display in a single column.

Card navigation spaces out items when there is content to arrange them evenly.

Back to top

Examples

Welsh Immunisation System (WIS)

This example shows a dashboard from the School-age Immunisations service within WIS. It uses cards to visually group related content and tasks, providing users with clear, immediate entry points to different parts of the service.

School-age Immunisations dashboard with Schools, Children and Sessions cards

Back to top