Grid Awards Block for React

Edit AWARDS at the top of the file. Each award has a title, its programme, a fixed year (an award given in 2024 stays 2024) and a mark. The header's tally is counted from the list, so adding or removing a tile keeps it true. Four tiles fill the 2 by 2 grid; for six, add a row: the grid is two columns wide at every size.

A Mark is a list of closed outlines that carry a faint solid fill (fills) and a list of plain strokes drawn over them (lines), all in a 64 by 64 box. The strokes keep a constant width at any size, and the fill is opaque so overlapping parts hide each other's outlines. Swap the path strings, or add a mark of your own, and give the tile that mark. Size comes from the class you pass to Drawn.

No. Zincthwaite, Cressmere, Beckleigh and Dovecrest are made-up programmes and Embury a made-up app. The trophies are drawn by the block, not copied from an award body. If you show a real award, name it in text, and use its official badge only where its rules allow it.

The awards are a list named Awards. Each tile gives the award as a heading, then the programme, then the year. The trophies are drawings hidden from assistive technology, so nothing depends on them, and each year sits in a bdi element so it keeps its place in a right-to-left layout.

The grid stays two across: the drawings step down from 112 to 64 pixels, the type a size smaller, and the grid's inset from the rails narrows. Titles and programmes wrap inside their tiles and nothing scrolls sideways at 320 pixels.

The header and the grid fade up once when the page loads, with a CSS transition. With reduced motion the transition is off and the block simply appears.