Support the page structure
To display a collection of items of equal importance
Templates
Cards
Card grids for displaying collections of equal-importance items in scannable rows.
Keep the layout consistent
When users need to scan and compare multiple entries
Use it intentionally
When items have a clear hierarchy — use a list instead
3 columns
3-column grid (3 per row) with overline + section title and clamped card titles.
4 columns
4-column grid for denser browsing layouts on wider viewports.
When to use
- To display a collection of items of equal importance
- When users need to scan and compare multiple entries
- For programme listings, service highlights, or resource collections
When not to use
- When items have a clear hierarchy — use a list instead
- When there are fewer than three items to show
Keyboard support
Use the SGDS components inside the cards 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.
Tab order
- Move focus into the pattern.
- Navigate through interactive elements in visual order.
- Confirm any revealed or supporting content remains reachable.
- Continue to the next interactive element on the page.
TabShift+TabEnterSpaceHave suggestions or feedback?
Share them with us on Slack → #ask-sgds-v3
Found a bug or issue?
Report it on GitHub Issues → sgds/templates/cards