Annual Report Awards Block for React

Edit AWARDS: each has a title, a category, a country, a fixed date and a top flag for the one honour the report leads with. Awards won, categories, countries, the busiest quarter and the bar are all counted from that list, and the year on the cover comes from the first date.

Each segment's width follows its count through a written-out grow-* class, so the busiest quarter is the longest, and it is the solid one. Each quarter is a list item with its label and count under the bar, so the numbers are also text; the bar itself is a drawing.

Yes. The cover is a figure whose caption holds the title and the year as text; replace the drawn laurel inside it with an img of your own cover and keep the caption for the text.

The heading, then the cover's caption ("Evergrain, Recognition report, 2025"), then "Highlights" as a description list and the quarter list with each count and the word "awards". The laurel, the dotted leaders and the bar segments are drawings hidden from assistive technology.

It looks like a page but it is the same responsive block as the others: it does not add print styles or a download. If you want a printable report, link to a PDF next to it.

No. Oakthwaite Awards, Evergrain and every award here are made up, and the countries are only places the example programme runs an edition. Dates are fixed in the data.