# TestimonialBand

> Testimonial band: a LandingHeader over an optional featured quote and a grid or snapping carousel of quote cards whose rows share one height.

```ts
import { TestimonialBand } from "@sdxc/ui/landing";
```

Renders a testimonial band with a chapter header and a quote grid of one column on a
phone, two from the `md` container and `columns` from `lg`, evened per quote count with a
short last row centred. Cards in a row stretch to one height, captions on one line.

## Examples

```tsx
<TestimonialBand title={t("quotes.title")}>
	<TestimonialBand.Quote name="Ana Ruiz" jobTitle="SRE, Lumen" avatar="AR">{t("quotes.ana")}</TestimonialBand.Quote>
</TestimonialBand>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `columns?` | `Columns` | Columns from the `lg` container. Defaults to DEFAULT_COLUMNS. |
| `tone?` | `Tone` | Band fill. Defaults to DEFAULT_TONE. |
| `eyebrow?` | `RemixNode` | Optional eyebrow above the title. |
| `title` | `RemixNode` | Section title — required, always supplied by the page. |
| `description?` | `RemixNode` | Supporting lead under the title. |
| `layout?` | `"grid" \| "carousel"` | Arrangement of `children`. Defaults to `"grid"`. |
| `carouselLabel?` | `string` | Accessible name of the carousel's scroll region. Defaults to "Testimonials". |
| `featured?` | `RemixNode` | One quote set full width above the rest, usually a `<TestimonialBand.Quote variant="featured">` with a hard number in it. |
| `children` | `RemixNode` | One TestimonialBand.Quote per testimonial. |
| `parts?` | `PartsProps` | Per-part styling for title, lead, and quote grid. |

Also accepts everything in `Omit<
		LandingSection.Props,
		"children" | "tone" | "title" | "parts"
	>`.


### TestimonialBand.Quote

One testimonial card: the quote in a `<blockquote>` that grows to the row's height and the speaker in a `<figcaption>` at its foot, with an optional round avatar.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The quote; `strong` fragments render in the emphasis ink at the copy's weight. |
| `name` | `RemixNode` | Who said it. |
| `jobTitle?` | `RemixNode` | Their job title and company, drawn muted under the name. |
| `avatar?` | `RemixNode` | An `<img>` or initials, cropped to a round 2.5rem frame. |
| `variant?` | `"card" \| "featured"` | Card look. Defaults to `"card"`. |
| `logo?` | `RemixNode` | The customer's mark, above the quote; a featured card draws it in its own ink. |
| `href?` | `string` | Links the customer story with a trailing line under the caption. |
| `linkLabel?` | `RemixNode` | Text of the story link. Defaults to "Read the story". |

Also accepts everything in `Omit<TagProps<"figure">, "children">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Layout` | `"grid" \| "carousel"` | `grid` sets every quote in even rows; `carousel` sets them in one row that scrolls and snaps sideways, showing the next card's edge. |
| `QuoteVariant` | `"card" \| "featured"` | `card` is the regular quote; `featured` inverts the card, sets the quote large and leads with an optional `logo`. |