About this set
Ways to show a group of people in a small space. The overlapping stack shows four members of a project team and a +5 button; it is a native details and summary disclosure that opens a panel listing the five hidden names, so it works without JavaScript and every member can be reached. The fan-out stack is a row of profile links that spread apart when the pointer is over the group or a link in it has keyboard focus, followed by a dashed Add reviewer button. Two cards show stacks in context: a task card with three drawn faces and a +2 assignee count, and a post with a small reaction stack and the text Liked by June Park, Omar Aziz and 23 others. Use the disclosure stack where people need to see who is in a group, the fan-out stack where each avatar is a link, and the in-context patterns for cards and feeds. No avatar depends on a hover tooltip for its name: names are in aria-label, visually hidden link text or visible text.
What’s included
- +5 overflow as a native details disclosure listing the hidden members
- Fan-out stack of profile links that spreads on hover and focus
- Dashed Add reviewer button with an accessible name
- Task card with drawn faces and a +2 count named 2 more assignees
- Liked by line that names people in visible text
Accessibility
Each stack is a list with an aria-label, and every avatar has a name without a tooltip: role="img" with aria-label, visually hidden link text, or visible text beside it. The +5 summary reads Show 5 more members and opens with Enter or Space. Links, the summary and the add button show a 2px indigo focus outline, and the fan-out and lift transitions switch off under prefers-reduced-motion.
Customise it
Overlap is the negative margin on .stack > li + li, the ring colour is --ring on .av and the size is --av. Bootstrap styles the overflow panel through --bs-dropdown-* variables on .dropdown-menu; in Tailwind change the -ml- utilities and the shadow ring colour.
