Support the page structure
At the top of a landing page to communicate the primary value proposition
Templates
Hero
Page-leading sections with headline, supporting copy, and primary call to action.
Keep the layout consistent
When you need a strong visual anchor before the main page content
Use it intentionally
On detail or utility pages where users already know the context
Default
Left-aligned headline + description + CTA, surface-default background.
Center
Same hero, content centered horizontally for a more formal feel.
Image right
50/50 split — content on the left, image on the right.
Full-bleed image right
Content in 6 cols, image absolutely positioned full-bleed on the right.
Background image
Full-cover background image with dark overlay and inverted text.
Background image (light)
Light translucent overlay over a background image, with fixed-dark text.
Keyboard support
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.
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/hero