Get startedFoundationsComponentsTemplatesBlocksAI
This site is a work in progress as part of GovTech {build} hackathon. Content may be incomplete or subject to change.
Browse Components

Components

AccordionAlertBadgeBreadcrumbButtonCard groupCardIcon cardImage cardThumbnail cardCheckboxClose buttonCombo boxDatepickerDescription listDividerDrawerDropdownFile uploadFooterIcon buttonIcon listInputLinkMainnavMastheadModalOverflow menuPaginationProgress barQuantity toggleRadioSelectSidebarSidenavSkeletonSpinnerStepperSubnavSwitchSystem bannerTabTableTable of contentsTextareaToastTooltip

Icon card

Icon cards can include headers, footers, rich content, and contextual background colours or images.

GitHub
Storybook
DesignUsageAccessibilityUpdates

Purpose

Lead with an icon

Use an icon to give each card a clear visual cue.

Show categories or features

Icon cards work well for service options, feature grids, and category lists.

Keep grids scannable

A repeated icon, title, and description pattern keeps rows balanced.

Anatomy

Service update A concise summary of the service update and what users can do next.
1

Container

2

Icon (optional)

3

Title (slot)

4

Description (slot)

Configuration

Orientation

Use orientation to switch between a vertical icon-on-top layout and a horizontal icon-beside layout.

Business grants Find financial support for growing local businesses.

Stacks the icon above the content. Suits grids of feature cards.

Tinted background

Use tinted to apply a subtle background colour that helps the card stand out from its surface.

Secure access Sign in with Singpass for verified identity.

Standard surface uses the page background.

Border

Use hideBorder to remove the default card outline when the surrounding layout already provides separation.

Tips and tricks Practical ideas to help you get started.

Default appearance with a visible card border.

Footer link

Use the footer slot to add a call-to-action link or button below the card content.

Application form Complete your details to start your application.

Card without an explicit action surface.

Stretched link

Use stretchedLink when the whole card should behave as one larger navigation target. The href is taken from the anchor inside the footer link.

Application form Complete your details to start your application. Start application

Only the visible footer link is clickable. Use when users should choose the explicit link.

Padding

Use noPadding to remove the card's internal padding when the surrounding layout provides its own spacing.

Dashboard modules Choose the modules you want to review.

Keeps the standard icon card spacing for most content cards.

Disabled

Use disabled when the card should be visible but unavailable.

Book appointment Choose a date and time for your visit. Book now

Default interactive state when the card's content or action is available.

Structure

Service update A concise summary of the service update and what users can do next.

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.

CategoryTokenValueWhere it's usedPaddingsgds-padding-none—Space between the left and right edges of the component and its contentsgds-padding-xl24pxSpace between the top and bottom edges of the component and its contentBordersgds-border-width-11pxBorder of the card

Usage

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.

Best practices

Business grants Find financial support for growing local businesses. Learn more
Use icon cards for parallel categories or features

Icon cards work best in a grid where items share the same shape. Services, features, or topics.

Application form Complete your details to start your application. You will need to provide your NRIC, contact information, and supporting documents. The form takes about fifteen minutes to finish, and you can save your progress at any point and return later before submission.
Do not pack long-form content into an icon card

If the description runs into multiple sentences, the card stops being scannable. Move it out of the card.

Secure access Sign in with Singpass for verified identity.
Keep titles and descriptions short

Icon cards are made to be scanned. Keep titles a few words and descriptions a single sentence.

Download Download
Do not use icon cards as replacements for buttons

Icon cards introduce a category or feature. For a single action without description, use a button instead.

Apply for a permit Start a new application for an event permit. Start application
Make the whole card navigate only when intended

Add a footer link with stretchedLink so the whole card is clickable and focusable for keyboard users.

Accessibility considerations

Built-in accessibility

  • Icon cards use card structure with an icon slot and optional stretchedLink behaviour.
  • The card becomes focusable only when it is configured as a stretched link.

Labels and content

  • Use the icon to support the title, not replace it.
  • Keep the title and description meaningful without relying on the icon.

Focus and interaction

  • If the card links somewhere, use one clear destination.
  • Keep any nested interactive content reachable and understandable.

Keyboard interaction

This component does not have a separate keyboard interaction table because:

  • Icon 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.

Updates

DateVersionDescription

Roadmap

Planned itemStatusTargetFuture enhancements for icon cardPlannedTBD

Feedback

Have suggestions or feedback?

Share them with us on Slack → #ask-sgds-v3

Bug Reports

Found a bug or issue?

Report it on GitHub Issues → sgds/components/icon-card

Singapore Government Design System

The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.

Past VersionsSGDS v1SGDS v2