Support the page structure
At the top of a landing page to communicate the primary value proposition
A full-width introductory block that anchors a landing page with a headline, description, and primary call to action.
At the top of a landing page to communicate the primary value proposition
When you need a strong visual anchor before the main page content
On detail or utility pages where users already know the context
Design and build government digital services with consistency, speed, and confidence.
sgds-button (used)
A full-width hero with a headline, description, and primary call-to-action button.
Design and build government digital services with consistency, speed, and confidence.
Design and build government digital services with consistency, speed, and confidence.
Component tokens are specific to each component. Use the table title as the prefix: padding-lg under sgds/hero means sgds/hero/padding-lg.
sgds/padding/lgsgds/gap/smsgds/border-color-mutedsgds/border-radius/mdsgds/border-width/1sgds/color-defaultsgds/surface-defaultDesign and build government digital services with consistency, speed, and confidence.
Keep the headline short — one clear benefit or action Lead with what the user gets, not what your service is
Design and build government digital services with consistency, speed, and confidence.
Don't put more than two calls to action in the hero Don't use the hero for secondary navigation or filters
Use the SGDS components inside the hero 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.