## Documentation index

This index lists every available documentation page and its Markdown source.

- [Documentation](https://vara.varavel.com/docs/index.md)
  - [Introduction](https://vara.varavel.com/docs/introduction/index.md)
  - [Getting Started](https://vara.varavel.com/docs/getting-started/index.md)
    - [Installation](https://vara.varavel.com/docs/getting-started/installation/index.md)
    - [Quick Start](https://vara.varavel.com/docs/getting-started/quick-start/index.md)
    - [Composing a Landing Page](https://vara.varavel.com/docs/getting-started/composing-landing-page/index.md)
  - [Fundamentals](https://vara.varavel.com/docs/fundamentals/index.md)
    - [Project Structure](https://vara.varavel.com/docs/fundamentals/project-structure/index.md)
    - [Page Generators](https://vara.varavel.com/docs/fundamentals/page-generators/index.md)
    - [Site Settings](https://vara.varavel.com/docs/fundamentals/site-settings/index.md)
    - [Search and LLM Output](https://vara.varavel.com/docs/fundamentals/search-and-llms/index.md)
    - [Customization](https://vara.varavel.com/docs/fundamentals/customization/index.md)
    - [Functions and Filters](https://vara.varavel.com/docs/fundamentals/functions-and-filters/index.md)
  - [Templates](https://vara.varavel.com/docs/templates/index.md)
    - [vara-landing](https://vara.varavel.com/docs/templates/landing/index.md)
    - [vara-docs](https://vara.varavel.com/docs/templates/docs/index.md)
    - [vara-docs-raw](https://vara.varavel.com/docs/templates/docs-raw/index.md)
    - [vara-docs-search-index](https://vara.varavel.com/docs/templates/docs-search-index/index.md)
    - [vara-docs-llms-txt](https://vara.varavel.com/docs/templates/docs-llms-txt/index.md)
    - [vara-docs-llms-full-txt](https://vara.varavel.com/docs/templates/docs-llms-full-txt/index.md)
    - [vara-sitemap-xml](https://vara.varavel.com/docs/templates/sitemap-xml/index.md)
    - [vara-404](https://vara.varavel.com/docs/templates/404/index.md)
  - [Components](https://vara.varavel.com/docs/components/index.md)
    - [Alert](https://vara.varavel.com/docs/components/alert/index.md)
    - [Badge](https://vara.varavel.com/docs/components/badge/index.md)
    - [Button](https://vara.varavel.com/docs/components/button/index.md)
    - [Container](https://vara.varavel.com/docs/components/container/index.md)
    - [Icon](https://vara.varavel.com/docs/components/icon/index.md)
    - [Keyboard Key](https://vara.varavel.com/docs/components/kbd/index.md)
    - [Header](https://vara.varavel.com/docs/components/header/index.md)
    - [Hero](https://vara.varavel.com/docs/components/hero/index.md)
    - [Content Split](https://vara.varavel.com/docs/components/content-split/index.md)
    - [Features](https://vara.varavel.com/docs/components/features/index.md)
    - [Stats](https://vara.varavel.com/docs/components/stats/index.md)
    - [FAQ](https://vara.varavel.com/docs/components/faq/index.md)
    - [Testimonial](https://vara.varavel.com/docs/components/testimonial/index.md)
    - [Carousel](https://vara.varavel.com/docs/components/carousel/index.md)
    - [Call to Action](https://vara.varavel.com/docs/components/cta/index.md)
    - [Footer](https://vara.varavel.com/docs/components/footer/index.md)
  - [Troubleshooting](https://vara.varavel.com/docs/troubleshooting/index.md)


## Documentation content

The documentation for the current page follows, reproduced verbatim.


# Call to Action

`<vara-cta>` provides the final conversion panel for a landing page. Use the centered layout for page endings and the inline layout between longer content sections.

## Usage

```html
<vara-cta
  title="Ready to get started?"
  description="Create your account in a couple of minutes."
  primary_label="Sign up"
  primary_href="/signup"
  secondary_label="Talk to sales"
  secondary_href="/contact"
/>
```

## Preview

<vara-cta
title="Ready to get started?"
description="Create your account in a couple of minutes."
primary_label="Sign up"
primary_href="/signup"
secondary_label="Talk to sales"
secondary_href="/contact"
heading_level="3"
/>

## Props

| Prop                | Default      | Description                                        |
| ------------------- | ------------ | -------------------------------------------------- |
| `layout`            | `"centered"` | `centered` or `inline`.                            |
| `eyebrow`           | `""`         | Small label above the title.                       |
| `title`             | `""`         | The panel heading.                                 |
| `description`       | `""`         | Supporting copy below the title.                   |
| `caption`           | `""`         | Small text under the actions.                      |
| `heading_level`     | `"2"`        | Section title level: 2 or 3.                       |
| `primary_label`     | `""`         | Primary action label. Requires `primary_href`.     |
| `primary_href`      | `""`         | Primary action destination.                        |
| `primary_target`    | `""`         | Primary action link target, such as `_blank`.      |
| `primary_icon`      | `""`         | Decorative icon on the primary action.             |
| `primary_variant`   | `"solid"`    | Primary action style.                              |
| `primary_color`     | `"neutral"`  | Primary action color.                              |
| `secondary_label`   | `""`         | Secondary action label. Requires `secondary_href`. |
| `secondary_href`    | `""`         | Secondary action destination.                      |
| `secondary_target`  | `""`         | Secondary action link target, such as `_blank`.    |
| `secondary_icon`    | `""`         | Decorative icon on the secondary action.           |
| `secondary_variant` | `"outline"`  | Secondary action style.                            |
| `secondary_color`   | `"neutral"`  | Secondary action color.                            |
| `background`        | `"base-100"` | Section surface.                                   |
| `container`         | `"lg"`       | One of: xs, sm, md, lg, xl, full.                  |
| `class`             | `""`         | Additional section classes.                        |

Actions are omitted unless both label and destination are present, preventing placeholder links from reaching production.

## Inline layout

For a compact panel that sits beside longer content:

```html
<vara-cta
  layout="inline"
  title="Questions about pricing?"
  description="Our team answers within one business day."
  primary_label="Contact us"
  primary_href="/contact"
/>
```