Rally
A centered call to action on a branded panel: heading, subcopy and two buttons on a rounded, elevated surface.
Call to action section templates
A call to action section is a deliberate pause in the page: one focused moment, on its own surface, asking for a single next step. It works because everything around it has been removed.
7 call to action section layouts
Each one below is a live preview rendering in your current design language, not a screenshot. Open any of them to see it full-width, switch the business type to read it with your kind of content, or add it to a page.
Split
A horizontal call to action — heading and subcopy on the left, a solid and a ghost button on the right.
Beam
A bold centered call to action on a diagonal gradient panel, with the copy and button reversed out of the colour.
Beacon
A big, airy call to action with no panel at all — the copy sits straight on the page between two soft ring marks.
Frame
The call to action inside an outlined frame with no fill, crowned by a short accent bar straddling the top edge.
Prompt
An editorial callout card with a solid accent tab running down its full left edge.
Ticket
The call to action styled as a ticket stub, split by a dashed perforation into a copy body and a tear-off action zone.
How to choose a call to action section
The decision is mostly about weight. A centered panel on a branded surface stops the page and demands attention — right at the end, wrong in the middle. A slimmer banner or split layout keeps momentum and suits a mid-page nudge. Whichever you pick, resist adding a second competing action; the whole value of the section is that there is only one thing to do.
At a glance
- Layouts
- 7 distinct call to action sections
- Styles covered
- centered, banner, primary-surface, split, panel, gradient, panel-less, decor
- Styling
- Your color, typography, spacing, radius and shadow tokens
- Export
- HTML, CSS, JSON, or an AI instruction package
Call to action section FAQ
Where should a call to action go on a page?
At minimum, once near the end, after the page has made its case. Longer pages benefit from a lighter one partway down for readers who are already convinced. Repeating the same heavy panel three times trains people to scroll past it.
How many buttons should a CTA section have?
One primary action. A secondary, lower-commitment option — see pricing, read the docs — is fine as a quiet link beside it, but two buttons of equal weight is just a decision the visitor now has to make.
Should a CTA use a coloured background?
A branded surface is what separates the section from the page around it, so usually yes. The one thing to check is that the text and button still meet contrast requirements against that colour rather than only looking acceptable.