Customer Quote Feature Split Block for React

Edit the words, the name and the role in the figure at the bottom of the file, and the initials in AvatarFallback. The quote is a figure with a blockquote and a figcaption, so assistive technology reads it as a quote with its attribution. To show a photo, put an AvatarImage before the fallback.

From lg the quote card is positioned against the drawing's wrapper and hangs below and past its end corner; the cell has extra bottom padding so nothing is cut. Below lg it's an ordinary block under the drawing, with a small gap, so it never covers the drawing on a narrow screen.

It is decoration, built from tokens: a window bar, four clauses of which two are highlighted, and a margin of two comments. It's hidden from assistive technology, and the three ticks beside it say what the product does. The margin is hidden below sm, where the page takes the whole width.

Yes. The quote card and the drawing use card, muted and foreground tokens with no dark scope, so they are light on a light page and dark on a dark one.

The two columns fade up once when the page loads. With reduced motion the transition is off and the section appears at once; the link's arrow moves a little on hover only when motion is allowed.

The text comes first, then the drawing at a shorter height, then the quote card under it with no overlap. The ticks wrap onto as many lines as they need, and nothing scrolls sideways at 320 pixels.