Hover Reveal Team Block for React

Edit PEOPLE at the top of the file. A person is a name, a role, a bio, a city and a previous string of studios; the initials come from the name. Point each row's href at the real profile page.

When a mouse rests on a row for a moment, and when keyboard focus lands on it. It closes when the pointer or focus leaves, and on Escape. Hover is never the only way: on a touch screen the row is a link, so a tap goes to the profile where the card's facts are. The row link is the hover card's trigger: Base UI's preview card trigger is an anchor itself, so the row's classes and href sit on HoverCardTrigger.

Tab moves from row to row; the card opens on each after a short delay, so tabbing quickly through the list doesn't flash cards. Enter follows the link, and Escape closes an open card. Each name is an h3 inside its link, so a screen reader can list the people by heading.

A tap on a row follows its link to the profile page. The card never opens on touch, so nothing is hidden behind it: the bio, city and previous studios belong on that page too.

The list's top rule, with + marks where it meets the rails, comes from Guides. Each row draws only its top rule, so the last row draws no bottom edge and the next block's top rule closes the list.

Below sm each row stacks the name over the role beside the avatar and the arrow, and the rows keep their height. Nothing scrolls sideways at 320 pixels.