Single Focus Testimonial Quote Block for React

Edit SENTENCES and AUTHOR at the top of the file. Each entry in SENTENCES is one sentence and keeps its trailing space, so the quote reads as one paragraph. Three sentences is the sweet spot; more than five makes the focus effect feel fussy. Use the customer's exact words and ask them first.

The page column is a two-column grid from lg: a 20rem rail and the quote. The quote's column carries the divider as a start border, and a Guides with marks="start" puts the + mark where it meets the top rule. Each column has its own vertical padding, so the divider runs the full height. Below lg the columns stack, with a rule and + marks between them.

Tab moves into the quote and stops once, on one sentence. The arrow keys move between sentences (Down and the reading-direction arrow go forward, Up and the other arrow go back), Home and End jump to the first and last, and Escape leaves the quote. The Shine Button is the next tab stop.

There is no hover, so tapping a sentence focuses it and the others recede. Tap elsewhere to bring them all back to full strength.

It is the block's one primary control: point its href at the full story. On Base UI, the link renders through render={<a href="…" />} with nativeButton={false}.

The quote is a figure with a blockquote and a figcaption for the speaker, and the sentences are plain inline text inside one paragraph, so it reads as a single quote. The dimming is only a colour change, and the dimmed sentences keep AA contrast.

Yes. The quote sits in a bdi, so its quotation marks stay at the ends of the sentence, the rail sits at the right with the divider on its mirrored edge, and the arrow keys swap so that forward always follows the reading direction.