Support the page structure
For product or service launch pages with a clear primary call to action
Templates
Landing page
A hero, feature cards, stats, and a closing call to action for product or service launches.
Keep the layout consistent
When you need a hero section followed by features, stats, and a closing CTA
Use it intentionally
For internal tools or admin portals — use a dashboard or management template
Default
Hero with headline and CTAs, life-moments feature cards, stats row, and a closing call to action.
When to use
- For product or service launch pages with a clear primary call to action
- When you need a hero section followed by features, stats, and a closing CTA
- For campaign pages that introduce a new initiative to the public
When not to use
- For internal tools or admin portals — use a dashboard or management template
- For long-form storytelling — use the blog template instead
Keyboard support
Use the SGDS components inside the landing page 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/landing-page