One-Liner Pills Testimonials Block for React

Each pill is a real button wrapped in a toggle tooltip, which is a small popover. It opens on click, tap, Enter or Space, and closes on Escape or a tap outside. Focus moves into the card when it opens and goes back to the pill when it closes. Unlike a hover tooltip, it is never reachable only with a mouse. Open one pill and another closes it.

The best line is a figure with a blockquote and a figcaption. Each pill is a button named with the quote and the words show who said it, which says whether it is expanded. The card that opens is a small dialog named for the person and holds their role and company. The initials avatars are hidden since the name is in the card. The pills sit in a list named One-line customer quotes.

Edit BEST for the line at display size and LINES for the pills: each entry has a quote, the author's name and initials, and their role and company. Keep each quote to a line or two; a pill wraps rather than cutting its text, so even a long one stays readable down to 320 px. The fifteen people and companies here are made up, and the heading counts them, so change it if you add or remove lines.

The pills wrap to as many rows as they need and centre in each row, and a pill never grows wider than the screen. Below sm only the first six show, and the "Show 8 more lines" button opens the rest and turns into "Show fewer lines"; it reports whether the list is expanded and names the list it controls. PREVIEW sets how many show. From sm all of them are always shown and the button is hidden.

The header and bands fade up once on load, and the card fades and zooms in when it opens, with plain CSS and no animation library. With reduced motion on, the block appears in place, the card appears without the zoom and the Shine Button's light fades in place instead of sweeping.

Yes. Add a link inside the card, after the role and company, and make it the pill's story. Because the card is a small dialog, the link is reachable with Tab once it is open.