Lead with an image
Use an image to give quick context before users read the card.
Components
Image card
Image cards can include headers, footers, rich content, and contextual background colours or images.
Present visual content
Image cards fit articles, projects, resources, or items with useful imagery.
Keep card grids stable
Shared structure and proportions help repeated image cards align.
Image card title
Supporting description with detail to explain image card content clearly.
1
Container
2
Image
3
Title (slot)
4
Description (slot)
Orientation
Use orientation to control whether the image sits above the content or beside it.
National Day Parade
Celebrate Singapore's birthday with the nation.
Default vertical layout stacks the image above the content.
Image position
Use imagePosition to flip the image to the opposite side of the content.
Career fair
Meet hiring agencies and explore new roles.
Image renders before the content (above in vertical, left in horizontal).
Tinted background
Use tinted to apply a subtle background colour that lifts the card from the page surface.
Featured story
A look at this month's highlights.
Uses the page background.
Padding
Use noPadding when the image card content should sit flush inside the card surface.
Default padding
Content uses the default inset spacing.
Use default padding for most image cards.
Border and disabled
Image cards can remove the border or show a disabled state when unavailable.
With border
Use the default border for clearer separation.
Image adjustment
Image adjustment controls how the thumbnail image fits inside the image area.
Default image
Use the default treatment when the image should connect directly to the card edge.
Image slots
Image badge and action slots add compact metadata or controls on top of the image.
Use these slots for concise image-level status or actions.
Footer link and stretched link
Image cards support footer links and stretched link behaviour for navigational cards.
Article
Use a footer link when only the link should navigate.
Image card title
Supporting description for the image card content.
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-11pxWhen 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.
National Day Parade
Celebrate Singapore's birthday with the nation.
Use a meaningful image, not a generic placeholder
The image is the primary signal. Pick one that previews the content so users can decide whether to click.
Frequently asked questions
Answers to common questions about our service.
Do not use image cards when the image adds no information
If the image is purely decorative or interchangeable, drop it. Icon or text cards will scan better.
Hawker culture
Stories from Singapore's hawker centres.
Always provide meaningful alt text
Write a brief, specific alt description. Never leave alt empty or repeat the card title verbatim.
Featured story
A look at this month's highlights.
Do not stretch images to fill mismatched aspect ratios
Provide images sized for the card's expected ratio. Crop the source rather than relying on stretching.
Career fair
Meet hiring agencies and explore new roles.
Use horizontal orientation in narrow columns
Horizontal image cards work better in lists, sidebars, or columns too narrow for a vertical image.
Built-in accessibility
- Image cards use card structure with an image slot and optional
stretchedLinkbehaviour. - 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 Slack → #ask-sgds-v3
Found a bug or issue?
Report it on GitHub Issues → sgds/components/image-card
Singapore Government Design System
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.