Overlapping circles representing a group, with a "+N more" indicator at the end. Hover any avatar to see a tooltip. The way Linear, GitHub, Slack show participants.
A compact way to show many people/contributors in a tiny horizontal space. Each avatar overlaps the previous by ~10px so you can see 4–6 people in the room a single card takes. If there are more than will fit, the last circle becomes "+12" or "+99". Used wherever a list of participants must be acknowledged without taking up real estate: PR reviewers, project members, comment threads, online indicators.
A flex container holding circular avatar elements. Each subsequent avatar gets a margin-left: -10px to overlap the previous. The avatar's border: 2px solid bgColor (same as the card background) cuts a visible halo so the circles look distinct. The "+N" overflow is just another circle styled with a muted background and the number text. On hover, each avatar lifts (translateY(-3px)) and gets z-index: 10 so it pops above the others. Optional: tooltip with the user's name via ::before with content: attr(data-name).
Hover any avatar — it lifts and shows a tooltip. Hover the whole stack — the overlap spreads.
5 reviewers · last updated 2h ago
12 members · 4 active now
121 people follow you
Build an avatar stack component. Flex container holding N avatars. Each .av: 36px circle, border:2px solid , white initials text 11px 700, gradient background (each avatar a different gradient — pink/violet/cyan/amber/teal). Apply margin-left:-10px to each .av except :first-child so they overlap by ~30%. The border in the card background color creates a clean visible halo between circles. Final .av.more shows "+8" with a muted background and border, representing additional members. On individual avatar :hover, transform:translateY(-3px) + z-index:10 so it lifts above siblings. On the stack container :hover, increase margin-left to -4px on children (the stack spreads slightly on inspect). Each avatar has a data-name attribute and a ::before pseudo-element with content:attr(data-name) that shows as a dark tooltip pill above on hover. Include 3 size variants: default (36px), lg (48px), xs (26px). Include an optional .online state: small green dot at bottom-right (10px circle with 2px border in card bg color) signaling presence.