> ## Documentation Index
> Fetch the complete documentation index at: https://docs.olonjs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# CTA Banner section — conversion call-to-action block

> The CTA Banner section renders a full-width conversion block with a title, optional description, and up to two action buttons. Use it as the final section.

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`](/reference/sections/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

<ParamField body="label" type="string">
  An eyebrow label rendered above the title — for example `"Start anywhere"`. Optional. Use it to give the CTA a campaign or editorial frame.
</ParamField>

<ParamField body="title" type="string" required>
  The conversion headline rendered in large type — for example `"Pick a thread, pull it"`. Keep it short and action-oriented.
</ParamField>

<ParamField body="description" type="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."`.
</ParamField>

<ParamField body="primaryCta" type="CtaSchema" required>
  The primary action button. Always rendered. See [CtaSchema fields](#ctaschema-fields) below.
</ParamField>

<ParamField body="secondaryCta" type="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"`.
</ParamField>

***

### CtaSchema fields

Each CTA object (both `primaryCta` and `secondaryCta`) uses the following shape:

<ParamField body="id" type="string" required>
  A unique identifier for this CTA button — for example `"home-cta-1"`. Used as the React key and for analytics targeting.
</ParamField>

<ParamField body="label" type="string" required>
  The visible button text — for example `"Read the latest"`.
</ParamField>

<ParamField body="href" type="string" required>
  The URL or path the button links to — for example `"/posts"` or `"https://example.com"`.
</ParamField>

<ParamField body="variant" type="&#x22;primary&#x22; | &#x22;secondary&#x22; | &#x22;ghost&#x22;" 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.
</ParamField>

***

## Settings fields

<ParamField body="paddingTop" type="&#x22;none&#x22; | &#x22;sm&#x22; | &#x22;md&#x22; | &#x22;lg&#x22; | &#x22;xl&#x22;">
  Vertical padding applied above the section. Use `"xl"` to visually separate the CTA from the content above it.
</ParamField>

<ParamField body="paddingBottom" type="&#x22;none&#x22; | &#x22;sm&#x22; | &#x22;md&#x22; | &#x22;lg&#x22; | &#x22;xl&#x22;">
  Vertical padding applied below the section. Use `"xl"` on the last section of a page to provide breathing room above the footer.
</ParamField>

***

## JSON example

The following example is taken from `home.json`:

```json theme={null}
{
  "id": "home-cta",
  "type": "cta-banner",
  "data": {
    "label": "Start anywhere",
    "title": "Pick a thread, pull it",
    "description": "Every post links to its topics and every topic links back to its posts. That is the whole demo — and the whole point.",
    "primaryCta": {
      "id": "home-cta-1",
      "label": "Read the latest",
      "href": "/posts",
      "variant": "primary"
    },
    "secondaryCta": {
      "id": "home-cta-2",
      "label": "About this demo",
      "href": "/about",
      "variant": "secondary"
    }
  },
  "settings": {
    "paddingTop": "xl",
    "paddingBottom": "xl"
  }
}
```

<Note>
  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`.
</Note>

***

## Used on pages

`cta-banner` appears as the **last section** on virtually every page:

| Page | Primary CTA | Secondary CTA |
| - | - | - |
| Home (`home.json`) | `"Read the latest"` → `/posts` | `"About this demo"` → `/about` |
| About (`about.json`) | `"Open the archive"` → `/posts` | `"Browse topics"` → `/tags` |
| Posts archive (`posts.json`) | `"Contact us"` → `/contact` | — |
| Tags index (`tags.json`) | `"Back to home"` → `/` | — |

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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.