Metric Testimonials Block for React

Edit RESULTS at the top of the file. Each result has a before and an after, the unit they count, a label, a kind and the quote with its person. The big figure is worked out from the numbers: gain shows the rise in percent, drop the fall, times the multiple, and now simply shows the new value with its unit. The chip under the label repeats the before and after, so the figure and its source can never disagree. Only put real numbers here.

It is Math.round((change * 100) / before), whole numbers only, so 20 to 28 points is +40% and 50 to 20 reports is −60%. There is no floating-point subtraction like 1 - 28 / 20 to drift. The minus sign is a real minus (U+2212), not a hyphen.

From md the list is a CSS grid with a 1px gap on a bg-border background, which draws the shared hairlines, and each cell is a subgrid that spans three rows: figure, label with its chip, and the quote with the person. Row heights come from the tallest cell, so nothing needs a fixed height. On phones the cells are a row that scrolls sideways and snaps to each cell.

The four cells are a list named "Customer results". Each reads its figure, its label and the chip as "from 20 to 28 points", then the quote as a figure with a blockquote and a caption naming the person and role. The avatars are decorative, since the name is right beside them. The section's only heading is its h2.

Yes. Figures and the before and after chip are wrapped in bdi, so +40% never turns into 40+% and the arrow stays between the numbers. Spacing and text alignment use logical properties, so the cells mirror.

It is a link (href="#") in the header row: point it at your stories page. The Shine Button renders the link it's given with render, with nativeButton={false}.