Testimonial Split About Block for React

The quote, the author, the role and the company are plain text in the card; the initials are in the avatar's fallback. Keep the quote to two sentences: it is set large, and a long one pushes the card taller than the text beside it. Swap the avatar fallback for an image if you have the customer's permission to use it.

The stars only draw the score, so they are inert and hidden from assistive technology; next to them a short line says "5 out of 5 stars from a customer" in text. They are the catalog's Rating in read-only mode, coloured with the foreground token instead of its default amber, so they follow every theme.

It is a figure with a blockquote first and the author in the figcaption last, so assistive technology reads the author as the quote's caption. The link to the full story sits after the figure, inside the card. The description's heading is the section's only h2.

The heading and the description come first, then a rule, then the card at full width with its inner padding reduced. The quote still lands on the first screen of a phone. In a right-to-left layout the card moves to the other side of the divider with the reading order unchanged, and the link's arrow turns around.

The heading, the text and the card fade up once on load, with CSS transitions, and with reduced motion they appear at once. There is no state and no script.