Blockquote Testimonial Block for React

Edit QUOTE, AUTHOR and SOURCE at the top of the file. The text the button copies is built from the same three, so the clipboard always matches what's on the page: the quote in quotation marks, then a line with the author's name, role and company, then the source.

It writes the quote and its attribution to the clipboard, and for three seconds the copy icon and label are replaced by a check and "Copied". A polite status inside the button tells screen reader users "Quote copied". If the browser refuses, for example on a page that isn't served over HTTPS or where clipboard access is blocked, the button shows a cross and announces that it couldn't copy.

The quote's band has a hairline above and below it, with a Guides marks="corners" rules="none" sides={false} putting a plus where each meets the page's rails. The caption row draws its own top rule with Guides marks="top" rules="top" sides={false}, so its plus marks land on the line instead of a pixel off, as a border-t would put them. All of it is decorative and takes your theme's colours.

The heading is the section's h2. The quote is a figure with a blockquote and a figcaption holding the author and a cite with the source. The avatar is hidden because the name is written beside it. The button is named "Copy quote" at all times; the label that swaps to "Copied" is visual only, since the status line already says it.

Yes. The padding and the layout use the inline sides, so the author sits at the start and the buttons at the end in Arabic or Hebrew, and the quote sits in a bdi so its quotation marks stay at the ends of the sentence.

The quote uses your theme's font-serif. Point that token at the serif you load, or swap the class on the quote for font-sans if your brand doesn't use one.

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