Stacked Testimonial Banner Block for React

Two sentences at most, and about 90 characters reads best: the card centres the text in a column about 32 rem wide, so a longer quote wraps to four lines on a phone and starts to look like a testimonials section. If you have more to say, link it from the band, or use a testimonials block. Edit QUOTE at the top of the file.

Together they tell assistive technology what the text is and who said it. The caption is the figure's last child, as the specification asks, and the decoration around them (the quote tile) is hidden from screen readers. The result band is outside the figure, because it describes the customer's outcome, not the words of the quote.

Yes: add an AvatarImage with the person's name as its alt before the fallback, and keep AvatarFallback, which shows the initials while the image loads or if it fails. The fallback is foreground text on a muted tile so it keeps its contrast in every theme.

As a number and a span of time the customer would recognise, true on the day you publish it and not dated ("14 blocks, one weekend", not "in April"). The number sits in bdi with the rest of the phrase, so right-to-left layouts keep it in order. Drop the band and the card ends at the caption if you have no result to show.

The quote wraps to three or four lines, the caption stays on one line, and in the band the result sits over the link instead of beside it. Nothing scrolls sideways at 320 pixels.