Certificate Wall Gallery Block for React

Each award in AWARDS has a title, issuer, year, citation, a wide and a high in wall units, a description and a scene. Replace the Scene in a frame with <img alt="" className="size-full object-cover" src={…} /> (the frame's button already names it) and keep wide and high at the photograph's proportions. The rail's years come from YEARS, and the counts are worked out from the list.

Each frame sits in a cell of the same height and is centred in it, so a tall frame and a wide one share one line through their middles, and a cord of the right length reaches up from each frame to the rail. The wall's unit is a fraction of its own width, so the whole composition scales together rather than reflowing.

It dims the frames from other years under a pale wash and sets their text a little lighter. They stay where they are, stay in the tab order and still show their citation, so you can compare years without losing your place. "All years" clears it.

The year rail is one stop in the tab order, with arrow keys between years. Each frame is a button, and focusing one opens its citation card the same way hovering does; Escape closes it. Screen readers get the award, issuer, year and citation without opening anything.

The frames hang two across, each on its own short rail, and the citation is written under each frame, since a touch screen has no hover. The year rail scrolls sideways.

No. The studio, the awards, the issuers and the jury's words are invented for the example, so replace them with your own before you publish anything like them.