Masonry Awards Block for React

The list is a CSS multi-column container (columns-3 from md) with no gap, so the browser fills the first column, then the second, then the third, balancing their heights, and each plaque stays whole (break-inside-avoid). The hairline between columns is the browser's column rule, so it always runs the full height. A plaque's top hairline meets the top rule where a column starts, so it draws a single line there. Below md there is one column.

Edit AWARDS at the top of the file. Each has a title, its programme, a fixed year and a mark; a citation is optional and gives that plaque a taller body. Add or remove plaques and the columns rebalance. The header's tally is counted from the list: the programme that gave the most awards, and how many.

In the order of the list, which is also the visual order: down the first column, then the second, then the third. That is true on a phone too, where they run as one column. Each plaque has the award as a heading, then its programme and year, then the citation if there is one.

No. Fjordfield, Rushmoor, Sedgebrook, Tamsworth, Thornecastle and Underhallow are made-up programmes, Quillfinch a made-up platform. The rosettes are drawn by the block, not copied from any award. If you show a real award, name it in text and use its official badge only where its rules allow it.

rosette(lobes, motif) draws a scalloped disc with an inner ring and a motif at its heart: change the lobe count (10 to 16 reads well at 24 pixels) or give it a motif of your own, a list of filled shapes and a list of strokes in a 64 by 64 box. The drawing is hidden from assistive technology.

One column, the plaques with a hairline between them and the rosette at the start of each; nothing scrolls sideways at 320 pixels. In a right-to-left layout the columns run from the end and the rules and marks mirror.