Card
<gcds-card>

Also called: tile, content card.

A card is a box containing structured, actionable content on a single topic.

• GitHub
• Figma

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.

Related components

Details to hide secondary information that a person can expand on the same page.

Container for basic layouts with a set width.