Specimen Cards Design Awards Block for React

Edit AWARDS at the top of the file: each has a name, what it was awardedFor, the jurors, the fixed year and a discipline that picks the specimen (type, grid, motion, colour or icons). The header's tally adds the jurors up. For a sixth award, add a specimen to specimenOf and change the grid's columns.

Each is a few boxes or one small SVG in a framed stage, in your theme's foreground and faint mixes of it, so they follow light and dark. They are hidden from assistive technology: the award and what it was for are in the text under them. Swap a specimen for an img of the real thing if you have one.

No. The Pineham Guild and Wynstay are made up for the example, and so are the juries. Use your own programmes, and an award body's official mark only where its rules allow it.

Below lg the cards are one row that scrolls sideways with snapping, the next card peeking in. The row is a focusable region named Design awards, so a keyboard can scroll it with the arrow keys. From lg all five share a row with room around their corners.

The awards are a list. Each item is the award as a heading, then the programme and year, then a description list with the thing it was awarded for and the jury. The year sits in a bdi so it keeps its order in a right-to-left layout.