Impact Metrics Awards Block for React

Edit AWARDS at the top of the file. Each award has a name, a programme, a fixed year, a recognised sentence, a shape for its mark and three metrics. A metric is a label, the before figure (the year before the award), the after figure (the year of it), its unit and whether it is a rate. The header's tally is counted from the same list, so it can't disagree with the rows.

From the two figures, never typed. A rate (a share in per cent) changes in points, so 41% to 78% reads "up 37 points"; anything else changes in per cent of the figure before, so 14 minutes to 6 reads "down 57%". The direction is a word and an arrow, never a colour, and the arrow doesn't mirror in a right-to-left layout.

No, and the block doesn't claim it. It sets what the award recognised beside the figures measured over the same year, labelled as the company's own, so a reader can judge both. Say how you measured in your own copy, and link to the method if you have one.

Each is an inline SVG in a 64 by 64 box: an outline on a faint fill, a detail line and a star, all in your foreground colour with a 1.5 pixel stroke that stays that thick at any size. The marks are decoration and hidden from assistive technology; the award is always in text beside them. To add a shape, add an entry to MARKS with its three paths.

The rows are a list named "Awards and the results behind them". Each opens with the award as a heading, then the programme and year, then the results as a description list: the label, the figure and the change ("down 57%, from 14 min"). Years and figures sit in bdi elements so they keep their order in a right-to-left layout.

No. Gantrywell and the Spruceley programmes are made up, and so are the figures. Swap in your own awards and numbers; if you show a real award, use its name in text and its official mark only if its rules allow it.