Minimal Avatars Team Block for React

Edit PEOPLE for the faces you want to show (a name and a role each) and the MORE and COUNTRIES constants for the rest of the team. The total in the last line is the faces plus MORE, so "24 people" stays honest when you add a face. The countries figure is typed by hand because the faces don't carry a country.

The tooltip opens when an avatar is hovered or focused, so Tab walks the strip and names each person as it goes. A tooltip is never the only way to get the name: every link also has the person's name and role as text for screen readers. On a touch screen there is no hover, so tapping an avatar follows its link to the person's page.

It is read as "and 12 more people" rather than "plus 12", and it is not a link or a focus stop: there is nothing behind it to open. If you want it to open the full roster, make it a link to your team page.

Below sm the avatars sit on a grid of seven narrow columns, so the twelve faces and the "+12" wrap into two rows (seven, then six), each face still overlapping its neighbour, and they get smaller so a row fits at 320 px. From sm they are one row.

Yes: put an AvatarImage in each Avatar, before the fallback. The initials show until the picture loads and whenever it fails. Keep the pictures square; every avatar has a ring in the page's background colour so overlapping edges stay clean on any photo.

The strip fades in once on load and a hovered or focused avatar lifts a few pixels. Both are CSS transitions and both stop under reduced motion; the hover lift never moves anything but the avatar itself.