Featured Quote With Metric Card Logos Block for React

Edit RESULT at the top of the file: a label for what was measured, the before and after as a display label and a number of seconds, and the faster badge text. The after bar's width is computed from the two numbers, so the bars always match the figures: change the seconds and the bars follow. Write the badge text yourself: it is a rounded percentage, and a hand-typed one that disagrees with the figures is the usual mistake.

The before and after are a description list: each term ("Before", "After") with its value, so a screen reader reads "Before, 6 min. After, 11 s". The two bars and the arrow are decoration and are hidden from assistive technology, because the figures already say it. The quote is a figure with a blockquote and a figcaption; the card is a sibling of the figure, so the caption stays the figure's last child.

The columns swap sides, the arrow between the figures mirrors so it points from before to after, and the figures are wrapped in bdi so "6 min" and "11 s" keep their order. The bars stay left to right (dir="ltr"), because a bar's length is a magnitude and not text. The wordmark keeps its own direction, as a logo would.

On a phone the parts stack in reading order: the plate, a horizontal rule with + marks, then the quote and the card. From lg the plate sits at the start beside the quote, with a vertical hairline between them. The rails and the top rule come from the page spine, so the block lines up with its neighbours.

The plate and then the quote with its card fade up once when the page loads, with CSS transitions. Nothing else moves: the bars are drawn at their final width. With reduced motion the transitions are off and the block simply appears.