Preview before clicking
A thumbnail gives users a visual cue about the content behind the card — reducing the chance they click through to something irrelevant.
Thumbnail card
Thumbnail cards can include headers, footers, rich content, and contextual background colours or images.
Storybook
components/thumbnail-card
components/thumbnail-cardCompact content listing
Thumbnail cards pack image, title, and description into a tight format — useful in sidebars, grids, or anywhere dense content needs to be browseable.
Consistent proportions across a grid
Shared aspect ratios across thumbnail cards keep a grid visually stable, even when the underlying images vary in composition.
Thumbnail card title
Supporting description for the thumbnail card.
1
Container
2
Thumbnail (optional)
3
Title (slot)
4
Description (slot)
Default
Thumbnail cards display a compact image beside the title and description for a dense, browseable layout.
Thumbnail card title
Supporting description for the thumbnail card.
Renders a card with a compact thumbnail image beside the title and description. Use when a small visual preview needs to sit alongside brief copy in a dense grid or listing.
Thumbnail card title
Supporting description for the thumbnail card.
Thumbnail card title
Supporting description for the thumbnail card.
Component tokens
Component tokens are specific to each component. Use the table title as the prefix: padding-none under sgds/thumbnail-card means sgds/thumbnail-card/padding-none.
sgds/thumbnail-card
sgds/padding/nonesgds/padding/xlsgds/border-color-transparentsgds/border-width/1sgds/bg-translucent-subtlesgds/dimension/128sgds/dimension/64sgds/opacity/50When to use
- Use this component to group related information so users can scan it in smaller chunks.
- Use it when the built-in SGDS structure helps you keep content consistent across the page.
When not to use
- Do not use this component when simpler page content or a plain heading would communicate the same information more clearly.
- Do not overload it with competing content, controls, or visual treatments that weaken hierarchy.
Thumbnail card title
Supporting description for the thumbnail card.
Keep the content focused
Use one clear content pattern so users can scan and understand the component quickly.
Thumbnail card title
Supporting description for the thumbnail card.
Thumbnail card title
Supporting description for the thumbnail card.
Do not overload the component
Too many repeated instances or competing content blocks make the page harder to scan.
Built-in accessibility
- Thumbnail cards use card structure with a thumbnail slot and optional stretched-link behaviour.
- The card becomes focusable only when it is configured as a stretched link.
Labels and content
- Use thumbnail images that support the title or content.
- Provide alt text for meaningful thumbnail images.
Focus and interaction
- If the card links somewhere, use one clear destination.
- Keep nested actions reachable and clearly labelled.
This component does not have a separate keyboard interaction table because:
- Thumbnail cards do not define a keyboard pattern on their own.
- Keyboard behaviour depends on whether the card is configured as a link or contains interactive elements.
Have suggestions or feedback?
Share them with us on
Found a bug or issue?
Report it on GitHub
Singapore Government Design System
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.