Seal Row Awards Block for React

Edit AWARDS at the top of the file: each has a title, a programme, a year and a shape (crown, star, medal, gem, shield or rosette). The line under the row is counted from the list: the number of different programmes that gave an award in the latest year. Keep it at six for the 3 by 2 and 6 across layouts.

Each seal is a few SVG paths in a 64 by 64 box that take the text colour, with a faint opaque fill and a 1.25 px stroke at any size. A shape tells the kind of recognition; a metal colour never does. They are aria-hidden, so the award is read from the text under each one.

No. The programmes are invented for the example and none is a real award, publication or badge. Replace them with your own, and link to the programme's page or story if you have one.

No. A year is fixed in the data, so an award given in 2025 stays 2025. It is wrapped in a bdi element so a right-to-left page keeps the digits in order.

Three seals across and two rows, the seals 56 px, the programme names wrapping onto a second line when they need to. The first award starts well inside the first screen and nothing scrolls sideways at 320 pixels.

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