Card
A card is a container that can hold content, images and buttons.
On this page
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
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.