Bento Awards Block for React

The facts are constants at the top of the file (PROGRAMME, YEAR, JUDGES, COUNTRIES, ENTRIES, SCORE, OUT_OF), and the cells read from them, so the sentence under the judges count, the bar and the lead cell always agree. Edit the quote and the chair's name in the markup of their cell.

Each figure is Counting Number set to start when it scrolls into view, so it counts once, with an unseen copy of the final number holding its width so nothing shifts while it runs. Screen readers read the final value, never the count. With reduced motion the value shows at once.

It is Progress, in foreground tones with a thin track, hidden from assistive technology because the same score is in the text beside it ("94 of 100"). The fill does not animate.

The seal is a list of closed outlines with a faint solid fill (SEAL_FILLS: two tails, the scalloped rosette, a star) and a list of plain strokes over them (SEAL_LINES) in a 64 by 64 box. scallop draws the rosette from a centre, two radii and a number of lobes. The laurel in the small cell is the same wreath kit the other awards blocks use: change its pairs and spread. Drawings are hidden from assistive technology; the award is in the text.

No. Fjordwood is a made-up programme, Loamly a made-up app and the juror a made-up person. If you show a real award, use its name in text and its official badge only where its rules allow it.

The five cells stack one per row, the lead first, with the seal above its text; the counting figures step down a size, and nothing scrolls sideways at 320 pixels. The cells' lines overshoot by 2rem, so they sit inset from the page's rails.