Support the page structure
To display a collection of items of equal importance
A responsive grid of equal-weight cards for displaying collections of services, features, or resources.
To display a collection of items of equal importance
When users need to scan and compare multiple options
When items have a clear hierarchy — use a list instead
Brief description of what this service does and who it is for.
Brief description of what this service does and who it is for.
Brief description of what this service does and who it is for.
sgds-card (used)
Equal-width cards in a responsive three-column layout.
Brief description of what this service does and who it is for.
Brief description of what this service does and who it is for.
Brief description of what this service does and who it is for.
Brief description of what this service does and who it is for.
Brief description of what this service does and who it is for.
Brief description of what this service does and who it is for.
Component tokens are specific to each component. Use the table title as the prefix: padding-lg under sgds/card-grid means sgds/card-grid/padding-lg.
sgds/padding/lgsgds/gap/smsgds/border-color-mutedsgds/border-radius/mdsgds/border-width/1sgds/color-defaultsgds/surface-defaultUse the SGDS components inside the card grid pattern so keyboard behaviour stays predictable.
Check focus order and action placement in the surrounding page context, especially when the pattern groups multiple interactive elements together.
TabShift+TabEnterSpaceShare them with us on
Report it on GitHub
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.