Editorial Testimonial Block for React

Edit OPENING, BODY, AUTHOR and PUBLICATION at the top of the file. OPENING is the first paragraph, which gets the drop cap; BODY is the rest, each paragraph in three parts so a figure such as "80%" can sit in a bdi and keep its sign in right-to-left text. Add paragraphs freely: the columns balance themselves.

It's the first letter of the opening paragraph, sunk three lines with the CSS initial-letter property (Firefox floats it instead) and inked in from the top once on load. The paragraph stays one piece of text, so screen readers read it whole and search finds it. With reduced motion, or without JavaScript, the cap is simply there.

From the medium breakpoint the quote uses CSS columns: the text flows down the first column and into the second, with a hairline between them. Below it, and at 320 pixels, it's a single column. Paragraphs may split across the two columns, as they do in print.

The heading is the section's h2. The quote is a figure with a blockquote of ordinary paragraphs, and the figcaption holds the byline and a cite with the publication. The avatar is hidden since the name is written beside it, and the frame's corner marks are decoration. Reading order is the page order, whatever the columns do visually.

Yes. Each paragraph takes its own direction, the drop cap opens from the right, the column order reverses, and the byline and the publication swap ends.

No. The cite line is optional: delete it and the byline stays. Only name a publication that did run the quote, since the line says so.

The header's button is the block's only primary control, a link to the full story. On Base UI, the button renders its link with render={<a href="#" />} and nativeButton={false}.