A card is a container that can hold content, images and buttons.

How to use cards

Cards can be used for many different purposes, including product tiles and hero content. They help users to scan information by visually grouping related content together.

When using cards:

  • Use a descriptive header marked with a <H> tag so that all users, including those using screen readers, can easily find and browse them
  • Check that all the content in the card, like images, copy, and CTAs, are contextually related
  • Keep the number of calls to action (CTAs) per card to a minimum

Example of a card

  • Interactive demo - Sainsbury's

Copy guidelines

As a card can be used for lots of different purposes, there’s no specific guidance for this component. You can read our copy principles for general guidance.

Was this page helpful?

Get in touch

Our team can answer any questions about using cards or give you a helping hand with your next project.
Select a theme to demo: