## 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.


# FAQ

`<vara-faq>` renders an accordion section. Pair it with `<vara-faq-item>` elements: only one item stays open at a time, and every item body can hold any content, from plain text to other components.

## Usage

```html
<vara-faq title="Frequently asked questions">
  <vara-faq-item id="plan" question="Is there a free plan?">
    Yes. The free plan covers a single project with the core features.
  </vara-faq-item>
  <vara-faq-item id="cancel" question="Can I cancel anytime?">
    You can cancel or downgrade from the billing settings.
  </vara-faq-item>
</vara-faq>
```

## Preview

<vara-faq title="Frequently asked questions" description="A few common questions before you get started." open_first="true" heading_level="3">
<vara-faq-item id="plan" question="Is there a free plan?">
Yes. The free plan covers a single project with the core features.
</vara-faq-item>
<vara-faq-item id="cancel" question="Can I cancel anytime?">
You can cancel or downgrade from the billing settings.
</vara-faq-item>
<vara-faq-item id="teams" question="Do you offer team pricing?">
Team pricing starts at ten seats and includes shared billing.
</vara-faq-item>
</vara-faq>

## FAQ items

`<vara-faq-item>` is a single accordion entry. Give it a unique `id` and a `question`, then put any content in the body — paragraphs, lists, alerts, or other components.

```html
<vara-faq-item id="returns" question="What is the return policy?">
  <vara-alert
    title="30-day returns"
    description="Unopened items can be returned within 30 days."
    color="info"
  />
</vara-faq-item>
```

Only one item inside the same `<vara-faq>` stays open at a time. Item questions render as level three headings, below the section title.

## Props

`<vara-faq>`:

| Prop                               | Default   | Description                              |
| ---------------------------------- | --------- | ---------------------------------------- |
| `open_first`                       | `"false"` | Open the first item when the page loads. |
| `eyebrow`, `title`, `description`  | `""`      | Section introduction.                    |
| `heading_level`                    | `"2"`     | Section title level: 2 or 3.             |
| `background`, `container`, `class` | varies    | Surface and layout customization.        |

`<vara-faq-item>`:

| Prop       | Default | Description                                  |
| ---------- | ------- | -------------------------------------------- |
| `id`       | `""`    | Unique accordion entry identifier. Required. |
| `question` | `""`    | Question shown in the expandable trigger.    |