Also called: tile, content card.A card is a navigational container with structured content on a single topic.
GitHub
Figma
Card component preview
Review these common uses for cards to see if they match the problem you’re solving for.
Problems cards solve
Cards organize information on the same subject in a static box shaped like a playing card. Use a card to:
Group small pieces of related information as a unit.
Present bite-sized previews and summaries of information with a link to navigate to more details elsewhere.
Support content discovery by creating more visual interest.
Note: For Canada.ca, avoid using cards in place of the doormats with the templates for landing page and theme and topic page.
Related components
Details to hide secondary information that a person can expand on the same page. Container for basic layouts with a set width. Help us improve Have questions or a request? Give feedback on our contact form. Something's wrong? Raise it through GitHub with an account. You'll have access to the team's direct responses, progress made on your issue, and issues raised by others. Give feedback Report an issue on GitHub 2026-07-06