Support the page structure
For public catalogues of programmes, events, services, or content
Templates
Catalogue
A search and filter layout for browsing programmes, events, or services in a card grid.
Keep the layout consistent
When users need search, sidebar filters, sort, and a card-based results grid
Use it intentionally
For tabular records that admins need to manage — use the application management template
Search and filter
Page header with search, sidebar filters, sort dropdown, and a responsive grid of result cards.
When to use
- For public catalogues of programmes, events, services, or content
- When users need search, sidebar filters, sort, and a card-based results grid
- For browsing experiences where each item shares the same card structure
When not to use
- For tabular records that admins need to manage — use the application management template
- When the result set is small enough to render without filters or pagination
Keyboard support
Use the SGDS components inside the catalogue 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/catalogue