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