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


# Testimonial

`<vara-testimonial>` focuses on one credible statement instead of presenting a dense carousel or decorative quote grid. It uses `figure`, `blockquote`, and `figcaption` semantics.

## Usage

```html
<vara-testimonial
  quote="The product paid for itself within the first month of use."
  author="Alex Morgan"
  author_role="Head of product, Northwind"
  author_href="https://example.com/alex"
  quote_href="https://example.com/blog/customer-story"
  result_label="Time saved per week"
  result_value="6h"
/>
```

## Preview

<vara-testimonial
quote="The product paid for itself within the first month of use."
author="Alex Morgan"
author_role="Head of product, Northwind"
author_href="https://example.com/alex"
quote_href="https://example.com/blog/customer-story"
result_label="Time saved per week"
result_value="6h"
/>

## Props

| Prop                               | Default                 | Description                                               |
| ---------------------------------- | ----------------------- | --------------------------------------------------------- |
| `quote`                            | `""`                    | Testimonial text.                                         |
| `author`                           | `""`                    | Attribution name.                                         |
| `author_role`                      | `""`                    | Role or organization.                                     |
| `avatar_src`                       | `""`                    | Optional avatar URL.                                      |
| `avatar_alt`                       | `""`                    | Avatar alternative text; keep empty when decorative.      |
| `avatar_width`, `avatar_height`    | `""`                    | Optional intrinsic image dimensions.                      |
| `author_href`                      | `""`                    | Optional link to the author's website or profile.         |
| `author_href_target`               | `"_blank"`              | Link target for the author.                               |
| `quote_href`                       | `""`                    | Optional link to the original quote.                      |
| `quote_label`                      | `"View original quote"` | Label for the original-quote link.                        |
| `result_value`, `result_label`     | `""`                    | Optional highlighted outcome; both are required together. |
| `background`, `container`, `class` | varies                  | Surface and layout customization.                         |

Internal author and quote destinations are deployment-aware. New-tab links automatically receive `rel="noopener noreferrer"`.

## Without extras

A minimal testimonial needs only a quote and an author:

```html
<vara-testimonial
  quote="Simple to adopt and easy to explain to the rest of the team."
  author="Sam Rivera"
  author_role="Engineering manager"
/>
```

## With an avatar

```html
<vara-testimonial
  quote="The onboarding guide answered every question we had."
  author="Priya Nair"
  author_role="Customer success lead"
  avatar_src="/images/priya.jpg"
  avatar_alt="Portrait of Priya Nair"
  avatar_width="40"
  avatar_height="40"
/>
```