# Testimonial blocks
Customer quotes for a landing, pricing or product page: a wall of quote cards
and a one-at-a-time carousel. Each block is one `.svelte` file built from
`SvAvatar`, `SvRating`, `SvCarousel` and `SvButton`, themed from the `--sg-*`
tokens. Company marks are made-up glyphs drawn as inline SVG, so nothing loads
from another server.
## Installation
Add the whole group, or one block by its name (shown under each demo):
See them first with `npx @svgrid/ui try blocks/testimonials`. No project needed.
## Testimonial cards
Six quote cards in CSS columns: three on desktop, two below 1024 px and one
below 640 px. Each card has the company wordmark, an optional read-only
`SvRating`, the quote and an `SvAvatar` with initials, name and role. Quotes
over 170 characters are cut at a word and open with Read more. The header shows
the average of the rated quotes and a Read customer stories button.
> Live demo: Testimonial cards block - https://svgrid.com/demos/646-block-testimonials-cards/
`npx @svgrid/ui add testimonials-cards`
## Testimonial carousel
One large quote at a time in an `SvCarousel` with arrows, dots and swipe.
Autoplay moves every 7 seconds, pauses while the pointer is over the carousel
or focus is inside it, and has a pause button. When the reader's system asks
for reduced motion there is no autoplay and no slide animation. The wordmark
row under the carousel jumps to that company's quote; on phones the arrows
move down beside the dots so they do not cover the text.
> Live demo: Testimonial carousel block - https://svgrid.com/demos/647-block-testimonials-carousel/
`npx @svgrid/ui add testimonials-carousel`
## Feeding your own quotes
Each block's `
```
```svelte
```
The carousel takes the same shape (`CarouselQuote`) plus `interval` in
milliseconds (0 turns autoplay off) and `onChange(index, item)`, which fires
on every slide change, for analytics.
## Headless
Each block here is a styled render of the core in its `
{#each cards.items as t (t.id)}
{cards.text(t)}
{#if cards.isLong(t)}
{/if}
{t.name}, {t.role} at {t.company}
{/each}
```
`toggleProps` carries `aria-expanded` and an `aria-controls` that points at
the quote's id from `quoteProps`. The carousel core has no carousel markup of
its own: it gives you `index` (settable), `next()`, `prev()`, `go(i)`,
`autoplay` (the interval, or 0 while `reducedMotion` is true) and
`jumpProps(i)` for buttons that jump to a quote, so you can drive `SvCarousel`
or your own track with it.
## See also
- [UI blocks overview](https://svgrid.com/docs/help/ui-blocks/index/)
- [SvCarousel](https://svgrid.com/docs/help/ui-components/sv-carousel/)
- [SvAvatar](https://svgrid.com/docs/help/ui-components/sv-avatar/)
---
SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/ui-blocks/testimonials/ . All docs: https://svgrid.com/llms.txt