Expandable Profile Testimonials Block for React

Edit the CUSTOMERS array at the top of the file. Each entry holds the quote, the speaker and the four profile facts: industry, teamSize, plan and customerFor. The facts are plain strings, so write them as you would say them ("120 people", "14 months") and keep them true; they are the part visitors will compare themselves against.

No, each cell keeps its own open state, so a visitor can open all three to compare. Opening a cell makes only that cell taller, and the cells sit at the top of their grid so the others don't stretch. To make them behave like an accordion, lift the state into the section and keep one open id.

It's a real button that announces whether the cell is open, and its name includes the speaker ("View profile, Ines Duarte") so three identical labels are told apart. The quote is a figure with a blockquote and a caption. The profile is a description list, so each label is read with its value.

No. The full quote is always in the page; the two-line preview is only a visual clamp, which the open state lifts. Nobody reads a shorter or a different text than a sighted visitor.

Yes. The button, the labels and the avatar row use logical sides, the chevron turns the same way in either direction, and quotes and values with units sit in a bdi so they keep their order. The + marks sit on the start corner of each cell.

The section fades up once on load and each cell opens with a short height transition. With reduced motion the fade is skipped and the cell opens at once. The Shine Button's light fades in instead of sweeping.

The header's button is the block's only primary control, a link to your customer directory. On Base UI, the button renders its link with render={<a href="#" />} and nativeButton={false}.