Highlight Quote Testimonial Block for React

Edit REVIEW and AUTHOR at the top of the file. The review is three strings: before, the key sentence that is both marked and pulled out, and after. Because the pull-out reuses key, the two can never drift apart. Keep key to one sentence, and use the customer's exact words.

HighlightText paints a background behind the text and grows it across the sentence with a CSS animation, starting where the text starts, so it runs from the right in Arabic or Hebrew. Each wrapped line gets its own mark. With reduced motion, or without JavaScript, the mark is simply there. The marked words stay real text. The colour is the MARKER constant, a 12% tint of the text colour; pass your own colour to highlightColor for another.

The review is a blockquote inside a figure, and the author is its figcaption. The pulled-out line is announced as "Highlight of the review" followed by the sentence, so a listener hears the same line twice by design, as in a magazine pull quote. The quote mark and the initials avatar are hidden.

Below the large breakpoint the review comes first and the pull-out sits under it on its tint, with a rule between them; from the large breakpoint up they sit side by side with the author under the pull-out and a divider between them. The reading order is the same at every width, and the review starts on the first screen of a phone.

Yes. The review and the pull-out sit in a bdi so their quotation marks stay at the ends, the divider moves to the reading start edge of the pull-out and the caption follows the reading direction.

A single centred quote shows one sentence and nothing else. Here the visitor also sees the whole review it was taken from, which makes the highlighted line easier to trust, and the line is repeated at display size rather than only marked.