Related components
Details to hide secondary information that a person can expand on the same page.
Container for basic layouts with a set width.
Card
<gcds-card>
Also called: tile, content card.
A card is a box containing structured, actionable 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 means to obtain 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.
Help us improve
Have questions or a request? Give feedback on our contact form.
Something's wrong? Raise it through GitHub with an