Testimonials
Testimonials Sticky
Client stories driven by the scroll: one sticky card that turns to the next story, or full-window cards stacking over each other.
Layout and motion from the Metuo template — see it in contextTry it in the page builderBlocks 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 |
|---|---|---|---|
| layout | "turn" | "stack" | "turn" | turn: one card sticky 100px below the top that turns to the next story each time a spacer passes the middle of the window (photo and text cut, the portraits slide). stack: every story a full-window sticky card, each later one sliding over the one before. |
| label / title / lead | string | — | The intro over the turning card; with stack only the title shows, visually hidden. |
| stories | { headline, quote, name, role?, portrait: { src, alt? }, image: { src, alt? }, outcomes? }[] | 4 stories | In order. The portrait is 2 : 3; outcomes show on the stack under their label. |
| action | { label, href } | Read full stories | layout="turn": the button under the story. |
| outcomesLabel | string | "Key outcomes" | layout="stack": the label over the outcomes. |
| buttonStyle | "spring" | "flip" | "sweep" | "spring" | The look of the button. |
| className | string | — | Classes for the <section>. |
- turn: the card is as tall as the window but at most 650px (800px on phones); one spacer per further story follows it, so the section is as long as the stories need. Screen readers get every story from a visually hidden list; the turning card is hidden from them. The portraits slide on a 0.4s tween (0.44, 0, 0.56, 1); with reduced motion they change at once.
- stack: plain CSS sticky, so there is nothing to reduce; the cards take the page's surface so each covers the one under it. Give the page an overlay header room: the cards start 100px from the top.
- No entrance motion, as on Framer.
