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


# Stats

Use `<vara-stats>` for a small set of measurable outcomes. The component uses a definition list so labels and values remain associated for assistive technology.

## Usage

```html
<vara-stats
  title="Numbers that matter"
  columns="3"
  stat_1_label="Active users"
  stat_1_value="12k"
  stat_2_label="Average response time"
  stat_2_value="1.4s"
  stat_3_label="Support rating"
  stat_3_value="4.9"
/>
```

## Preview

<vara-stats
title="Numbers that matter"
columns="3"
stat_1_label="Active users"
stat_1_value="12k"
stat_1_description="Accounts active in the last 30 days."
stat_2_label="Average response time"
stat_2_value="1.4s"
stat_2_description="Measured across the public API."
stat_3_label="Support rating"
stat_3_value="4.9"
stat_3_description="Based on 2,300 responses."
heading_level="3"
/>

## Props

| Prop                               | Default   | Description                             |
| ---------------------------------- | --------- | --------------------------------------- |
| `variant`                          | `"cards"` | `cards` or `strip`.                     |
| `columns`                          | `"4"`     | Two, three, or four desktop columns.    |
| `stat_N_value`                     | `""`      | Required value for records 1 through 6. |
| `stat_N_label`                     | `""`      | Required metric definition label.       |
| `stat_N_description`               | `""`      | Optional context.                       |
| `eyebrow`, `title`, `description`  | `""`      | Section introduction.                   |
| `heading_level`                    | `"2"`     | Section title level: 2 or 3.            |
| `background`, `container`, `class` | varies    | Surface and layout customization.       |

Values are rendered in a mono typeface so columns of numbers align. Only complete records (value and label together) are rendered.

## Strip variant

For a horizontal strip without card surfaces:

```html
<vara-stats
  variant="strip"
  columns="4"
  stat_1_label="Downloads"
  stat_1_value="48k"
  stat_2_label="Countries"
  stat_2_value="90"
  stat_3_label="Contributors"
  stat_3_value="120"
  stat_4_label="Years"
  stat_4_value="6"
/>
```