Support the page structure
To convert visitors at the end of a marketing page
Templates
Call to action
Focused sections that anchor a single decision moment, in contained or full-bleed layouts.
Keep the layout consistent
To anchor a primary action in the middle of long-form content
Use it intentionally
Inside transactional flows where actions belong with the form
Contained · primary
Constrained-width CTA on a primary surface, left-aligned.
Contained · primary · center
Same CTA, content centered.
Contained · raised
Constrained-width CTA on a raised surface for soft emphasis.
Contained · raised · center
Raised surface, content centered.
Full-bleed · primary
Edge-to-edge primary-coloured CTA section for maximum impact.
Full-bleed · primary · center
Edge-to-edge primary CTA, content centered.
Full-bleed · alternate
Edge-to-edge alternate-surface CTA, lower visual weight.
Full-bleed · alternate · center
Edge-to-edge alternate CTA, content centered.
When to use
- To convert visitors at the end of a marketing page
- To anchor a primary action in the middle of long-form content
- To break up content with a focused decision moment
When not to use
- Inside transactional flows where actions belong with the form
- When the user is mid-task and shouldn't be redirected
Keyboard support
Use the SGDS components inside the call to action 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/call-to-action