Use it when the next step deserves its own section. A Call-to-action (CTA) banner briefly reminds visitors why moving forward makes sense, then gives them one or two concrete actions. It works well after a service explanation, feature section, pricing section or longer piece of content.
LOW-KEY CLOSE
When the surrounding content has already done the explaining, a light and simple next step can be enough.
STRONG DECISION POINT
A dark, full-width close gives more visual weight to a moment where taking the next step already feels natural.
COMPACT HIGHLIGHT
The accent version works well as a mid-page CTA when you want to offer one easy action without turning it into a full closing section.
IMAGE-LED VERSION
A background image earns its place when it reinforces the promise or mood rather than acting as decoration.
One primary button is usually enough. Add a secondary action only when there is a genuinely useful alternative path — for example, viewing pricing alongside starting a trial. If both buttons compete for the same attention, keep just one.
The message, buttons and background work together to determine how strong the decision point feels.
Choose Light, Dark, Accent or Image presentation.
Inline is more compact. Stacked gives the message more vertical space and visual emphasis. Banner height sets how tall it is, from Extra compact to Extra tall.
Set a primary action and an optional secondary action, each with its own label and destination. Button style is Outline or Filled (accent).
For image style, set an image, focal point and an Overlay strength of None, Light, Medium or Dark.
Use three text levels to build a compact standalone conversion section. The headline can use H1 to H6; in the middle or at the end of a page, H2 or H3 is usually appropriate. The headline and the subhead can take line breaks.
Keep the banner restrained inside the content flow or make it a full-width closing section. As the last block on the page it meets the footer; Keep the gap above the footer keeps the usual gap.
Slowly moving colour can now sit behind the text.
The familiar look, with no moving backdrop.
Aurora: slowly drifting colour from your palette behind the text, which stays readable.
The aurora backdrop is hidden while this block has its own background, text or accent colour. If a visitor's device asks for less motion, the colours stand still.
AURORA BACKDROP
Your palette's colours drift slowly behind the text. For this, the block must not have its own background colour.
Choose based on how much explanation the action needs.
END WITH A CLEAR NEXT STEP
A good CTA banner summarises the point, creates focus and names the next step clearly.