# Testimonial Card

> A quote with the person, role, organization, and an optional proof link.

- Category: Marketing
- Kind: component
- Page: https://uaiblocks.dev/components/testimonial-card
- Registry item: https://uaiblocks.dev/r/testimonial-card.json
- Source: https://github.com/victor-teles/uai/blob/main/src/registry/uai/components/testimonial-card.tsx

## Install

```bash
bunx shadcn@latest add https://uaiblocks.dev/r/testimonial-card.json
```

## Usage

```tsx
import {
  TestimonialCard,
  TestimonialCardAuthor,
  TestimonialCardAvatar,
  TestimonialCardName,
  TestimonialCardOrganization,
  TestimonialCardProof,
  TestimonialCardQuote,
  TestimonialCardRole,
  type TestimonialCardVariant,
} from "@/components/ui/uai/testimonial-card";

export function TestimonialCardPreview({ variant = "card" }: { variant?: TestimonialCardVariant }) {
  return (
    <TestimonialCard variant={variant}>
      <TestimonialCardQuote>
        <p style={{ margin: 0 }}>
          “We moved forty support agents over in a week. First-reply time dropped from six hours to
          under two, and nobody had to retrain.”
        </p>
      </TestimonialCardQuote>
      <TestimonialCardAuthor>
        <TestimonialCardAvatar>ML</TestimonialCardAvatar>
        <TestimonialCardName>Mara Lindqvist</TestimonialCardName>
        <TestimonialCardRole>Head of Support</TestimonialCardRole>
        <TestimonialCardOrganization>Brightmoor Outdoor Supply</TestimonialCardOrganization>
      </TestimonialCardAuthor>
      <TestimonialCardProof href="#case-study">Read the Brightmoor case study</TestimonialCardProof>
    </TestimonialCard>
  );
}
```

## Anatomy

- `TestimonialCard`
  - `TestimonialCardQuote`
  - `TestimonialCardAuthor`
    - `TestimonialCardAvatar`
    - `TestimonialCardName`
    - `TestimonialCardRole`
    - `TestimonialCardOrganization`
  - `TestimonialCardProof`

## Accessibility

- Uses figure, blockquote, and figcaption so the quote stays tied to its attribution.
- The avatar is decorative; the person’s name, role, and organization are text.
- The proof link marks its external-style arrow as decorative; give it descriptive link text.