Lead with a visual
The image sets immediate context — users understand the content of the card before reading a single word.
Image card
Image cards can include headers, footers, rich content, and contextual background colours or images.
GitHub
components/image-card
components/image-cardStorybook
components/image-card
components/image-cardPresent editorial or catalogue content
Image cards work well for articles, projects, products, or resources where a thumbnail helps users decide what to open.
Consistent layout at scale
A grid of image cards maintains visual rhythm because every card shares the same proportions and content structure.
Image card title
Supporting description for the image card content.
1
Container
2
Image (optional)
3
Title (slot)
4
Description (slot)
Default
Image cards display a full-width image above the card content, letting the visual set context before users read the text.
Image card title
Supporting description for the image card content.
Renders a card with a full-width image above the title and description. Use when the image needs to carry part of the story — such as for articles, projects, or catalogue items.
Image card title
Supporting description for the image card content.
Image card title
Supporting description for the image card content.
Component tokens
Component tokens are specific to each component. Use the table title as the prefix: padding-none under sgds/image-card means sgds/image-card/padding-none.
sgds/image-card
sgds/padding/nonesgds/padding/xlsgds/border-color-transparentsgds/border-width/1sgds/bg-translucent-subtlesgds/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.
Image card title
Supporting description for the image card content.
Keep the content focused
Use one clear content pattern so users can scan and understand the component quickly.
Image card title
Supporting description for the image card content.
Image card title
Supporting description for the image card content.
Do not overload the component
Too many repeated instances or competing content blocks make the page harder to scan.
Built-in accessibility
- Image cards use card structure with an image slot and optional stretched-link behaviour.
- The card becomes focusable only when it is configured as a stretched link.
Labels and content
- Provide alt text for meaningful images.
- Use empty alt text for decorative images in the surrounding image markup.
Focus and interaction
- If the card links somewhere, use one clear destination.
- Avoid placing multiple competing actions inside one image card.
This component does not have a separate keyboard interaction table because:
- Image 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.