Testimonials
Testimonials Grid
Client quotes on cards in fixed-width, centred columns under a centred heading, each card rising in as it comes into view.
Layout and motion from the Titen 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 |
|---|---|---|---|
| as | "h1" | "h2" | "h2" | Heading level — h1, in the text-h1 size, when the block opens a testimonials page. |
| label | string | Testimonials | Small muted line above the heading; an empty string leaves it out. |
| title | string | What our clients say | Centred heading; its words rise in when it comes into view. |
| testimonials | { quote, name, photo?, rating? }[] | 6 quotes | One card each, in order. photo is a 24px round avatar beside the name (decorative); rating is out of 5, shown with one decimal after a star — leave it out for none. |
| className | string | — | Classes for the <section>. |
- Columns keep a fixed width and sit centred: one of 300px on phones, two of 350px from 768px, three from 1280px, 24px apart, so a column is never narrower than on phones; each row is as tall as its tallest card and the others sit centred in it.
- Titen's appear effects, once each: as the title comes into view the label rises 7px and the heading's words rise 10px out of a 7px blur, 0.05s apart (text-appear, spring 320 / 58); each card rises 18px and fades in once half of it is in view (scroll-reveal, spring 320 / 55, 0.05s delay). Nothing moves with reduced motion.
- Each card is a <figure> with the quote in a <blockquote>; the rating reads "Rated 4.8 out of 5". The card is the theme's card surface with a border and the star takes the primary colour; Titen's tint and orange stay with the template.
