Text-Only Testimonial Block for React

Edit LETTER and SIGNER at the top of the file. LETTER holds the salutation, the paragraphs and the closing; add or remove paragraphs freely. SIGNER is the name that gets written in and the role under it. The header copy and the button are in the component below them.

The page column is a two-column grid from lg (five parts for the header, seven for the letter). The letter's cell has lg:border-s for the divider and a Guides marks="start" rules="none" sides={false} that puts a plus mark where the divider meets the top rule; both cells carry their own vertical padding, so the divider runs the full height of the section. The header sits at the top of its cell and the button at its foot, so the title never drifts.

Writing Text lifts each word of the name into place in turn, once, as the page loads, in italic serif type at a slight angle. It's real text: screen readers read the name once, and search and copy find it. With reduced motion, or without JavaScript, the signature is simply there from the first frame.

The heading is the section's h2. The letter is a figure with a blockquote of ordinary paragraphs, and the figcaption holds the signature and the signer's role. The animation never hides anything from assistive technology.

Yes. Every paragraph is in a bdi, the prose follows the reading direction, the split swaps sides with its divider and plus marks, and the signature's tilt mirrors.

The Shine Button is a real link (href="#"): point it at the customer's full story. The button renders the link it's given with render, with nativeButton={false}.