Compact List Testimonials Block for React

Edit the ENTRIES array at the top of the file. Each entry has a lead, which is the first sentence and the only part a closed row shows, and a rest, which follows it. The first row opens by itself; change defaultOpen={index === 0} to start them all closed. The open row shows lead and rest together, so the two can never disagree. Keep lead short and complete in itself, because on a phone it's cut to one line.

It's a typed constant, TOTAL_QUOTES, standing for the size of your whole archive. The list is a window onto it, so "Showing 12 of 48 quotes" in the footer and the label of the Shine Button are made from the number of entries and that constant. Set it to the real count of quotes you can link to, or remove the footer line if you can't.

Tab moves from row to row. Enter or Space opens or closes the focused row, and the chevron turns to show its state. The scroll area follows focus, so tabbing to a row below the fold scrolls it into view. Focus stays on the row when you open it.

The heading is the section's h2, and the hairlines and + marks are decoration and hidden. The rows are a list inside a region named "Customer quotes, one line each". Each row is a button that says whether it's expanded and reads the first sentence, then the name and role, even on a phone where the name is hidden visually. The open panel holds the full quote in a blockquote.

The rows open and close at once instead of animating their height, and the chevron turns without a transition. The header and the band fade up once on load, and not at all with reduced motion. The Shine Button's light fades in where it stands instead of sweeping.

Below the sm breakpoint the name and role are dropped from the closed row, so the first sentence gets the room, and the open panel shows them under the quote instead. The scroll area stays 20rem tall at every width, and nothing scrolls sideways at 320px.

Yes. Rows start on the right with the avatar, the name and role and the chevron follow in reading order, and the quotes sit in a bdi so their marks stay at the ends of the sentence.

Change the href of the Shine Button. Its label is built from TOTAL_QUOTES, so it always says how many you'll find there. On Base UI, the link renders through render={<a href="…" />} with nativeButton={false}, and the rows use the Base UI collapsible panel.