Judge Hover Card Awards Block for React

Edit JUDGES at the top of the file: each has a first and last name, a role, an org, a city and country, the judged fields as a list and a short bio. The header's count is taken from the list, so the number of judges and of distinct countries always matches the cells. Keep a multiple of three, or of two for the phone layout, so every row is full.

On hover and on keyboard focus of the name button, and the cell is a large target because the button stretches over it. Escape closes it. On a touch screen the card isn't relied on: the bio is shown in the cell instead.

Where the device can't hover, each cell shows its bio inline, clamped to four lines, so nothing depends on a hover card. Elsewhere the bio stays in the cell as hidden text and is read as the name button's description.

The judges are a list named "Mosshurst Cup judges". Each item has the name as a heading holding the button, then role and workplace, the city, a list of what the judge judged and the bio, read as the button's description. The avatar is decorative and hidden.

No. The cup, the judges, their workplaces and their bios are made up for the example, and Panelist is a made-up platform. Use real people only with their permission, and photos only if you have them: the avatars are initials on purpose.

Two cells across, each with the avatar, name, role and tags wrapping in its own box; the bio shows inline on touch. The header centres above, and nothing scrolls sideways at 320 pixels.