Team 70 - Team directory with a hover portrait

Pro

A serif team directory listing names, roles and cities, with a large colourful portrait beside it that switches to whoever you hover or focus.

Shadcn Team 70 block

Component data

ID
team70
Access
pro
Created
Oct 30, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Team 70 block design & features

The block is a directory variation of team68, using the same colourful studio portraits and serif type.

On the left are a serif heading, a short intro and a list of the team divided by hairlines. Each row shows the name in a large serif, the role underneath and the city on the right.

On large screens a tall portrait sits in a sticky column on the right. Hovering, focusing or clicking a row crossfades the portrait to that person and shows their name, role and city beneath it. The active name darkens while the others stay muted. The crossfade is instant for visitors who prefer reduced motion.

On smaller screens the large portrait is hidden and each row shows a small square thumbnail instead.