# Testimonial

A `.testimonial` is a quote card: oversized opening quote glyph → blockquote body → figcaption (cite + title). Composes with [`.x-card`](/ui/card) for the surface — required.



## Install

```ts
import "elements-kit/ui/styles.css";

import "elements-kit/ui/styles/palette/gray.css";
import "elements-kit/ui/styles/neutral/gray.css";
import "elements-kit/ui/styles/palette/mint.css";
import "elements-kit/ui/styles/accent/mint.css";
import "elements-kit/ui/card/card.css";

import "elements-kit/ui/marketing/marketing.css";
```

## API

```html
<figure class="x-card testimonial">
  <blockquote>
    The kit <em>cut our design-to-ship loop in half</em>.
  </blockquote>
  <figcaption>
    <cite>Jane Doe</cite>
    <span data-title>Staff Engineer, Acme Co</span>
  </figcaption>
</figure>
```

| Element                       | Notes                                                                                   |
| ----------------------------- | --------------------------------------------------------------------------------------- |
| `> blockquote`                | Pulls quote glyphs via `::before` / `::after`. `<em>` inside renders in `--neutral-12`. |
| `> figcaption > cite`         | Name. Always non-italic.                                                                |
| `> figcaption > [data-title]` | Role / company line.                                                                    |

## Variants

Inherits all `.x-card` variants — add `data-variant="elevated"` for shadow, `data-variant="borderless"` to drop the border. Wrap any ancestor with `data-material-background="translucent"` for a frosted backdrop.

## Theming

The quote glyph color follows `--accent-9` — set `data-accent="X"` on an ancestor to re-theme.

## Tips

> **Do**
>
> Keep quote body under \~3 lines on desktop. Use `<em>` to highlight the punchy phrase.

> **Don't**
>
> Stack multiple paragraphs in the blockquote. One thought, one card.