Preview linked content
A small image gives users a quick cue before they open the item.
Components
Thumbnail card
Thumbnail cards can include headers, footers, rich content, and contextual background colours or images.
List content compactly
Use thumbnail cards for dense lists where an image helps scanning.
Keep grids stable
Consistent thumbnail proportions help repeated cards align cleanly.
Thumbnail card title
Supporting description for the thumbnail card.
1
Container
2
Thumbnail (optional)
3
Title (slot)
4
Description (slot)
Orientation
Use orientation to control whether the thumbnail sits above the content or beside it.
Annual report 2025
Highlights and metrics from the past year.
Thumbnail sits beside the content, best for lists and narrow columns.
Tinted background
Use tinted to apply a subtle background colour to the thumbnail card.
Tax filing guide
Step-by-step instructions for residents.
Standard surface uses the page background.
Disabled
Use disabled to mute the card and prevent interaction with its links or actions.
Browse datasets
Open data published by Singapore agencies.
Open
Default interactive state.
Padding
Thumbnail cards can remove internal padding when used in compact media lists.
Default padding
Content uses default card padding.
Use default padding for most thumbnail cards.
Footer and stretched link
Thumbnail cards support footer links and stretched link behaviour for navigational cards.
Guide
Use a footer link when only the link should navigate.
Thumbnail card title
Supporting description for the thumbnail card.
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-padding-none—sgds-padding-xl24pxsgds-border-width-11pxsgds-dimension-128—sgds-dimension-64—When 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.
Annual report 2025
Highlights and metrics from the past year.
Use thumbnail cards in dense lists where a small visual helps scanning
Thumbnail cards work best in lists of resources or articles where a small image gives a preview at a glance.
National Day Parade
A photo essay from this year's celebration.
Do not use a thumbnail card when the image needs to lead
If the image is the main reason to click the card, use an image card so the picture has room to work.
Tax filing guide
Step-by-step instructions for residents.
Keep thumbnails consistently sized within a list
Use the same thumbnail dimensions for every card in a list. Mismatched sizes break the visual rhythm.
Census 2025 results
Key statistics from the latest national census.
Do not omit alt text on the thumbnail image
The thumbnail still carries meaning. Provide concise alt text describing the picture, not the title.
Browse datasets
Open data published by Singapore agencies.
Open
Make the whole card one click target only when intended
Add stretchedLink so the entire card, not just the footer link, responds to click and keyboard.
Built-in accessibility
- Thumbnail cards use card structure with a thumbnail slot and optional
stretchedLinkbehaviour. - 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 Slack → #ask-sgds-v3
Found a bug or issue?
Report it on GitHub Issues → sgds/components/thumbnail-card
Singapore Government Design System
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.