Skip to main content
The cta-banner section is a full-width conversion block designed to close a page. It renders a headline, an optional supporting sentence, and one or two action buttons. It shares the same CtaSchema shape as the hero section, so button variants behave identically. Use cta-banner as the last section on any page where you want to guide visitors toward a clear next step — whether that’s reading more content, contacting you, or navigating to a related page.

​
Data fields

​
string
An eyebrow label rendered above the title — for example "Start anywhere". Optional. Use it to give the CTA a campaign or editorial frame.
​
string
required
The conversion headline rendered in large type — for example "Pick a thread, pull it". Keep it short and action-oriented.
​
string
A one- or two-sentence supporting statement below the title. Optional. Use it to reduce hesitation or reinforce why the visitor should click — for example "Every post links to its topics and every topic links back to its posts.".
​
CtaSchema
required
The primary action button. Always rendered. See CtaSchema fields below.
​
CtaSchema
An optional second action button rendered beside the primary. Use it to offer an alternative path without diluting the main call to action — for example "About this demo" alongside "Read the latest".

​
CtaSchema fields

Each CTA object (both primaryCta and secondaryCta) uses the following shape:
​
string
required
A unique identifier for this CTA button — for example "home-cta-1". Used as the React key and for analytics targeting.
​
string
required
The visible button text — for example "Read the latest".
​
string
required
The URL or path the button links to — for example "/posts" or "https://example.com".
​
"primary" | "secondary" | "ghost"
required
Controls the button’s visual style.
  • primary — the most prominent style; use for the main conversion action.
  • secondary — a supporting style; use for the alternative action.
  • ghost — a low-emphasis link-style button; use for soft navigational prompts.

​
Settings fields

​
"none" | "sm" | "md" | "lg" | "xl"
Vertical padding applied above the section. Use "xl" to visually separate the CTA from the content above it.
​
"none" | "sm" | "md" | "lg" | "xl"
Vertical padding applied below the section. Use "xl" on the last section of a page to provide breathing room above the footer.

​
JSON example

The following example is taken from home.json:
You can omit description and secondaryCta for a minimal single-button CTA. The posts archive page (posts.json) uses exactly this pattern — just a title and a single primaryCta pointing to /contact.

​
Used on pages

cta-banner appears as the last section on virtually every page: Place cta-banner after all content sections and before the footer. Set paddingBottom to "xl" on the last page to give the footer a clean visual separation.