Seconded Quote Testimonials Block for React

Edit FEATURED for the main quote and SECONDS for the row. Each second is a name, a role, a company, initials and a line. The count in "Seconded by 4 teams" is the length of the list, so it follows when you add or remove a person. Keep each line to one sentence: the note it opens in is a small box.

Each avatar is a real button. A tap, a click, Enter or Space opens a short note beside it with the person's name, role and line, and Escape closes it and puts focus back on the avatar. It opens on activation, not on hover alone, so touch screens and keyboards get the same note as a mouse. Only one note is open at a time.

The main quote is a figure with a blockquote and a figcaption, under the section's h2. Each avatar button is named "Rina Okafor, Quill: what they say", and the initials inside are hidden so the name isn't read twice. The note is named with the person's name too.

Yes. The quote sits on a bg-card panel with shadow-lg and a thin ring, inside a bg-muted/50 shell, so the emphasis comes from structure rather than from a dark panel. The notes open in a layer outside the block and use the same theme tokens, so they match whichever mode the page is in. In a theme where the card and the page are nearly the same colour, the ring and the shadow still lift the quote off the shell.

It's a link (href="#") in the header row: point it at the full customer story. It's the block's only primary control; the avatars are ghost buttons. The button renders the link it's given with render, with nativeButton={false}.

Yes. The avatars overlap from the inline start, the notes open above or below, whichever has room, and each quote and line sits in a bdi so its quotation marks stay at the ends. For photos, add an AvatarImage with the photo's src and an empty alt inside each Avatar, before the AvatarFallback: the button already carries the person's name, so the image stays decorative.