avatar group stack team overlap avatar group stack overlap team members count stacked avatar group overlapping user avatars with count
Avatar Group
Fetch pattern JSON:
curl https://webspire.de/patterns/avatar/group.json group.html
<div class="ws-avatar flex items-center -space-x-3" aria-label="User group">
<span class="inline-flex h-10 w-10 items-center justify-center rounded-full border-2 border-[var(--ws-avatar-border)] bg-[var(--ws-avatar-bg)] text-sm font-medium text-[var(--ws-avatar-text)]">AB</span>
<span class="inline-flex h-10 w-10 items-center justify-center rounded-full border-2 border-[var(--ws-avatar-border)] bg-[var(--ws-avatar-bg)] text-sm font-medium text-[var(--ws-avatar-text)]">CD</span>
<span class="inline-flex h-10 w-10 items-center justify-center rounded-full border-2 border-[var(--ws-avatar-border)] bg-[var(--ws-avatar-bg)] text-sm font-medium text-[var(--ws-avatar-text)]">EF</span>
<span class="inline-flex h-10 w-10 items-center justify-center rounded-full border-2 border-[var(--ws-avatar-border)] bg-[var(--ws-avatar-bg)] text-sm font-medium text-[var(--ws-avatar-text)]">GH</span>
<span class="inline-flex h-10 w-10 items-center justify-center rounded-full border-2 border-[var(--ws-avatar-border)] bg-[var(--ws-avatar-bg)] text-xs font-medium text-[var(--ws-avatar-text)]">+5</span>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
avatargroupstackteamoverlap
Slots
| Name | Required | Description |
|---|---|---|
| avatars | Yes | Individual avatar circles that overlap. |
| count | No | Badge showing number of additional members. |
Overlapping avatar stack with negative horizontal spacing and a “+N more” badge. Use to show team members, project collaborators, or shared document participants.