Cards are surface containers that group related content with a border and background. They support padding modifiers and an interactive (clickable) variant.
Tokens
| Token | Default (Light) | Default (Dark) | Purpose |
|---|---|---|---|
| Surface colour | |||
| Border colour | |||
| — | Corner radius | ||
| — | Internal padding |
Basic usage
Card content goes here. Cards provide a contained surface for grouping related information.
<div class="card">
<p>Card content goes here.</p>
</div>
Flush card
Remove internal padding with — useful when the card contains a full-bleed image or nested content that manages its own spacing.
Full-bleed content area
<div class="card card--flush">
<!-- Content manages its own padding -->
</div>
Interactive card
Wrap in an <a> tag with for clickable cards. Adds hover shadow and focus ring.
Clickable card
<a class="card card--interactive" href="#">
<h3 class="card-title">Clickable card</h3>
<p class="card-description">This entire card is a link.</p>
</a>
Image card
Combine with to create a clickable card with a full-bleed image. The and classes handle display and border-radius. Use a padded inner wrapper for the text content.
<a class="card card--flush card--interactive" href="#">
<img class="img img-16x9 card-image" src="image.jpg" alt="Description">
<div style="padding: var(--card-padding);">
<h3 class="card-title">Card with image</h3>
<p class="card-description">Supporting text below the image.</p>
</div>
</a>
Accessibility notes
- Use semantic HTML inside cards (
<h3>,<p>,<ul>, etc.) - Interactive cards (
<a>) automatically receive focus ring onfocus-visible - If a card contains multiple interactive elements, do not wrap the entire card in an
<a>
Do / Don't
Do:
- Use cards to group related content visually
- Use when content needs full-bleed layout
Don't:
- Don't nest interactive cards inside other interactive elements
- Don't use cards purely for visual decoration — they should contain meaningful content