Testimonials
Testimonials Portraits
The clients' portraits are the tabs: the chosen one is large, the others share the rest, and the quote beside them cross-fades, with its title, role and rating.
Layout and motion from the Ciketo template — see it in contextBlocks come with Pro
Preview every block now, in any theme and at any width. The source, the install command and the AI prompt unlock when Pro opens, once the catalog reaches 20 templates.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | Testimonials | The small heading (h2) above the portraits; it also names the tab list. |
| testimonials | { title, quote, name, role, company?, photo, rating? }[] | 4 clients | One portrait tab each; the first is chosen. The title (h3) sits over the quote in a blockquote; the name, "role, company", a rule and the rating ("5.0/5" and five stars, only when rating is given) sit at the bottom. |
| height | number | 636 | Height of the portraits column from 768px up, in pixels; the chosen portrait takes 55% of it. |
| thumbWidth | number | 320 | Width of the portraits column from 768px up, in pixels. |
| className | string | — | Classes for the <section>. |
- Below 768px the portraits are a row 160px tall above the quote, 24px apart; from 768px they are a column beside it, 320px wide and 636px tall, 40px apart (50px from 1024px). The chosen portrait takes 55% of the strip, the others split the rest, 10px apart. The quote area is up to 750px wide and the tallest quote sets its height, so nothing jumps when you switch.
- A click or the arrow keys (with Home and End) choose a client; the portraits resize and the quotes cross-fade by opacity (spring, bounce 0, 0.4s), and nothing runs on a timer. The portraits are a tab list named by the clients (the photos carry no alt text), the quotes not shown are inert and hidden from assistive technology, each quote is a figure with a blockquote and a caption, and the stars are decorative. With prefers-reduced-motion the state changes at once.
- The quote follows the chosen portrait at every size; Framer switched it on desktops only, so on tablets and phones the first quote stayed (a bug). The stars use the primary colour (Ciketo's orange), those above the rounded rating dimmed to 20%. Ciketo's Soft Black text and 2px corners were left out.
