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


# Features

`<vara-features>` is the general card collection for capabilities, integrations, resources, and short process summaries. Use project-specific components when records need a richer domain model.

## Usage

```html
<vara-features
  title="Everything included"
  columns="3"
  item_1_icon="shield-check"
  item_1_title="Secure by default"
  item_1_description="A sentence about how this capability helps the reader."
  item_2_icon="zap"
  item_2_title="Fast to set up"
  item_2_description="A sentence about how this capability helps the reader."
/>
```

## Preview

<vara-features
title="Everything included"
description="A short introduction to the capabilities on this page."
columns="3"
item_1_icon="shield-check"
item_1_title="Secure by default"
item_1_description="A sentence about how this capability helps the reader."
item_1_badge="Security"
item_2_icon="zap"
item_2_title="Fast to set up"
item_2_description="A sentence about how this capability helps the reader."
item_3_icon="users"
item_3_title="Built for teams"
item_3_description="A sentence about how this capability helps the reader."
heading_level="3"
/>

## Props

| Prop                               | Default        | Description                                              |
| ---------------------------------- | -------------- | -------------------------------------------------------- |
| `eyebrow`, `title`, `description`  | `""`           | Section introduction.                                    |
| `columns`                          | `"3"`          | Two, three, or four desktop columns.                     |
| `item_N_title`                     | `""`           | Required field for each rendered card, from 1 through 6. |
| `item_N_description`               | `""`           | Supporting copy.                                         |
| `item_N_icon`                      | `""`           | Decorative bundled icon.                                 |
| `item_N_badge`                     | `""`           | Compact metadata label.                                  |
| `item_N_href`                      | `""`           | Optional destination.                                    |
| `item_N_link_label`                | `"Learn more"` | Link label when a destination exists.                    |
| `heading_level`                    | `"2"`          | Section title level: 2 or 3.                             |
| `background`, `container`, `class` | varies         | Surface and layout customization.                        |

Cards without links do not present hover behavior. Linked cards expose a visible keyboard focus state.

## With links

Give a card a destination and its own link label:

```html
<vara-features
  columns="2"
  item_1_icon="book-open-text"
  item_1_title="Read the documentation"
  item_1_description="Everything you need to get up and running."
  item_1_href="/docs/"
  item_1_link_label="Open the docs"
  item_2_icon="message-circle"
  item_2_title="Join the community"
  item_2_description="Ask questions and share what you build."
  item_2_href="/community"
  item_2_link_label="Join the forum"
/>
```