Group related content
Use cards to package a title, description, media, and action as one unit.
Components
Card
Cards can include headers, footers, rich content, and contextual background colours or images.
Support quick comparison
Consistent card layouts help users scan options across a list or grid.
Adapt to content
Slots let cards support summaries, media, metadata, and links.
Default slot content
Supporting description for the card content.
Secondary text
1
Container
2
Icon or thumbnail (optional)
3
Subtitle (optional)
4
Title
5
Content slot (optional)
6
Description (optional)
7
Secondary text (optional)
8
Footer (optional)
9
Badge (optional)
Border
Controls whether the card uses its default border.
Shows the default card border. Use when the card needs a clear container that stands apart from the surrounding layout.
Tinted
Background treatment that changes visual emphasis without changing structure.
Adds a subtle tinted background. Use to add gentle emphasis while keeping the same structure and content hierarchy.
Orientation
Layout direction for arranging content and media vertically or horizontally.
Card title
Media sits above the content in the default vertical layout.
Stacks the media above the content. Use when the card should follow a more traditional vertical layout.
Image position
Image placement before or after the content across vertical and horizontal layouts.
Card title
The image appears above the content in a vertical card.
Card title
The image appears to the left of the content in a horizontal card.
Places the image before the content. Use when the image should appear above in vertical cards or to the left in horizontal cards.
Badge
Top-right badge content for lightweight status or metadata.
A badge sits in the top-right area of the card. Use it to surface status, count, or lightweight metadata without taking over the card body.
Secondary text
An extra supporting text row below the description for added context.
Secondary text sits below the description as a supporting row. Use it when the card needs an extra line for metadata, status, or supporting details.
Footer
Footer content patterns, from lightweight links to stronger calls to action.
Removes the footer action area. Use when the card is purely informational and does not need a follow-up action.
Hierarchy
Title emphasis across heading levels within the same card structure.
Card title
Use a higher emphasis when the title needs more prominence.Uses a larger heading level for the title. Use when the card title needs stronger emphasis in the layout.
Subtitle
A short label above the title for category or supporting context.
Adds a short label above the title. Use to show a category or supporting context before the title.
Description
Supporting text beneath the title for added explanation or context.
Description text sits below the title as supporting copy. Use it when the card needs extra explanation or context.
Content slot
Custom content areas within the card body using the available content slots.
Slot content
Supporting description for the card content.The default slot sits directly below the title. Use it for the card's main custom content, such as text, metadata, or small supporting elements.
State
Cards can be disabled when their primary action or destination is unavailable.
Use the default state for available content.
Stretched link
Stretched link makes the card's link cover the whole card area while keeping the visual structure unchanged.
Use when only the explicit link should be interactive.
Menu slot
Use the menu slot for compact secondary actions associated with the card.
Use for secondary actions that should not dominate the card.
Upper and lower slots
Upper and lower slots add supporting metadata above or below the main content.
Use metadata slots for short supporting details that help users scan cards.
Image adjustment
Image adjustment controls how image content is fitted within the card image area.
Default image
The image sits flush with the top edge of the card.
Use the default image treatment when the image should connect directly to the card edge.
Default slot content
Supporting description for the card content.
Secondary text
Design tokens used
Each row is a colour, spacing, or size value the component uses, and the right-most column tells you where in the component you'll see it.
sgds-border-width-11pxsgds-border-radius-md8pxsgds-padding-xl24pxsgds-padding-xl24pxsgds-gap-lg20pxsgds-gap-xs8pxsgds-gap-2-xs4pxsgds-gap-lg20pxsgds-body-color-default#1A1A1Asgds-color-subtle#525252sgds-color-subtle#525252sgds-body-color-default#1A1A1Asgds-link-color-default#0269D0sgds-link-color-emphasis#0151A0sgds-bg-translucent-subtleoklch(from #0E0E0E l c h / 0.05)When to use
- Use card to group a related set of content and actions into a single scannable block.
- Use it when users need to compare similar items quickly across a list or grid.
When not to use
- Do not fill a card with too many competing text blocks, actions, or metadata.
- Do not use a card when the content works better as a list or page section.
Keep the card focused
A clear title, short description, and one obvious hierarchy make cards easier to compare.
First block of content
Supporting description that repeats the title instead of adding useful context.
Secondary text
Do not cram the card
Too much competing content makes the card harder to scan and weakens the primary action.
Built-in accessibility
- Cards provide structured slots for title, description, media, supporting content, and footer actions.
- Cards can become focusable when the
stretchedLinkpattern is used.
Labels and content
- Use a clear title and place actions in the footer slot.
- Provide alt text for meaningful images placed inside card media slots.
Focus and interaction
- Keep interactive elements inside the card reachable in a logical order.
- Avoid making the whole card and an inner link point to different destinations.
This component does not have a separate keyboard interaction table because:
- Cards do not define a keyboard pattern on their own.
- Keyboard behaviour depends on the links, buttons, or
stretchedLinkpattern placed inside the card.
Have suggestions or feedback?
Share them with us on Slack → #ask-sgds-v3
Found a bug or issue?
Report it on GitHub Issues → sgds/components/card