# CTA Banner

> Render a prominent bordered call-to-action section.

Canonical HTML: https://press.varavel.com/docs/shortcodes/cta-banner/
Markdown: https://press.varavel.com/docs/shortcodes/cta-banner/index.md

`cta_banner` renders a full-width CTA section with a centered bordered card. It is designed for final conversion blocks and major page transitions.

## When to Use

Use it near the end of a landing page when the visitor has enough context to act. Keep the copy short and choose one primary action.

## Usage

```markdown
{{/* cta_banner(
title="Ready to build?",
description="Start with the docs and compose your first page.",
action_1_text="Read the docs",
action_1_url="/docs/"
) */}}
```

## Live Example

{{ cta_banner(
container="md",
title="Ready to build?",
description="Start with the docs and compose your first page.",
action_1_text="Read the docs",
action_1_url="/docs/",
action_2_text="View shortcodes",
action_2_url="/docs/shortcodes/"
) }}

## Parameters

| Parameter          | Description                                           |
| ------------------ | ----------------------------------------------------- |
| `container`        | Inner content width for the CTA card.                 |
| `eyebrow`          | Small uppercase label above the title.                |
| `title`            | Main CTA heading.                                     |
| `description`      | Supporting copy below the heading.                    |
| `action_1_text`    | Primary action label.                                 |
| `action_1_url`     | Primary action URL.                                   |
| `action_1_variant` | Primary action style: `solid`, `outline`, or `ghost`. |
| `action_1_color`   | Primary action color token.                           |
| `action_2_text`    | Optional secondary action label.                      |
| `action_2_url`     | Optional secondary action URL.                        |
| `action_2_variant` | Secondary action style.                               |
| `action_2_color`   | Secondary action color token.                         |
| `caption`          | Small note below the actions.                         |
| `bg`               | Full-width section background token.                  |
| `class`            | Additional CSS classes on the outer section.          |