Customer Result Footer Block for React

Edit the READINGS array for the two bars (a label, the minutes text, a width class and a fill) and the figure and caption in the JSX. The percentage is typed, so keep it in step with the two readings: here 46 of 74 minutes is a 38% cut and the second bar is 62% as wide. The numbers are example data for a made-up customer.

They are a drawing: two rounded bars whose widths follow the two readings, hidden from assistive technology, because the same numbers are in the caption ("from 74 to 46 minutes"). They have no axis, so they only show the direction and the size of the change.

It is a link: point its href at the case study. It is the block's one primary control, a Shine Button, and the only one in the footer. The Shine Button takes asChild around an a. The Shine Button takes render={<a href="#" />} and nativeButton={false} so it is a real link.

The block is a footer element. The links sit in one nav labelled Footer. The story has an h2 ("Customer story") and a figure whose figcaption says what the numbers mean. The big "−38%" is in a bdi so its sign and unit stay together in right-to-left text.

The brand and the two link groups come first, then a rule, then the story with the figure over the bars and the button under the frame, then the legal band. Nothing scrolls sideways at 320 pixels.