Snippet Testimonials Block for React

Edit RESULTS at the top of the file. Each excerpt is a list of pieces, and a piece with hit: true is drawn in bold, so you decide exactly which words stand out. Keep each excerpt to about two lines, and bold two or three phrases at most: more than that and nothing stands out.

No. It borrows the look of a results page and has no input, no filtering and no ranking: the stories are shown in the order they are written in. If you want a field that really filters quotes, take the Search testimonials block and keep this layout for the results.

The grid becomes one column and shows the first three results. An "All 6 stories" button (it reports aria-expanded and controls the list) reveals the other three; on tablets and desktops all six always show.

Every headline is a link, and it is the only link in its result, so a keyboard user tabs from story to story without stops in between. Point each href at the full case study. The links are underlined on hover and focus and keep a visible focus ring. The text of each one is different, so a list of links reads clearly out of context. The Shine Button in the header goes to the whole index. On Base UI, the link renders through render={<a href="…" />} with nativeButton={false}.

The results are a named ordered list, and each is a figure with a blockquote for the excerpt. The breadcrumb is the figure's caption, read as the name, then the role and company, then the time, with the chevrons hidden. The bold terms are strong, so a reader may stress them. The section's heading is an h2 and each headline is an h3.

Yes. The chevrons in the breadcrumb mirror, the excerpt sits in a bdi so its quotation marks stay at the ends of the sentence, and everything is laid out with logical spacing, so the first column starts at the right.