Avatar group

wu-avatar-group overlaps avatars, each with a ring in the page background. Put the overflow count (“+3”) in a last wu-avatar as real text.

Class	Effect
`wu-avatar-group`	Root. Overlapping row of `wu-avatar` children
`animated`	The stack fans out into a row on hover and focus, opt-in

Default

AL BO CW +3

<div class="wu-avatar-group" role="group" aria-label="Project members">
  <span class="wu-avatar blue" role="img" aria-label="Ana Lopez">AL</span>
  <span class="wu-avatar green" role="img" aria-label="Ben Okafor">BO</span>
  <span class="wu-avatar purple" role="img" aria-label="Chen Wei">CW</span>
  <span class="wu-avatar" role="img" aria-label="3 more members">+3</span>
</div>

Sizes

The group takes the size of its avatars.

AL BO +2

<div class="flex col gap-3">
  <div class="wu-avatar-group" role="group" aria-label="Small group">
    <span class="wu-avatar sm blue" role="img" aria-label="Ana Lopez">AL</span>
    <span class="wu-avatar sm green" role="img" aria-label="Ben Okafor">BO</span>
    <span class="wu-avatar sm" role="img" aria-label="2 more members">+2</span>
  </div>
  <div class="wu-avatar-group" role="group" aria-label="Large group">
    <span class="wu-avatar lg blue" role="img" aria-label="Ana Lopez">AL</span>
    <span class="wu-avatar lg green" role="img" aria-label="Ben Okafor">BO</span>
    <span class="wu-avatar lg" role="img" aria-label="2 more members">+2</span>
  </div>
</div>

Animation

animated (or wu-animated on an ancestor) spreads the avatars into a row on hover or when focus is inside the group, staggered. Reduced motion turns it off.

AL BO CW DK

<div class="wu-avatar-group animated" role="group" aria-label="Reviewers">
  <span class="wu-avatar blue" role="img" aria-label="Ana Lopez">AL</span>
  <span class="wu-avatar green" role="img" aria-label="Ben Okafor">BO</span>
  <span class="wu-avatar purple" role="img" aria-label="Chen Wei">CW</span>
  <span class="wu-avatar pink" role="img" aria-label="Dana Kim">DK</span>
</div>

Right to left

The stack overlaps toward the inline start, so the first avatar sits at the right.

أ ب ت +3

<div dir="rtl" class="wu-avatar-group" role="group" aria-label="أعضاء المشروع">
  <span class="wu-avatar blue" role="img" aria-label="أنا">أ</span>
  <span class="wu-avatar green" role="img" aria-label="بن">ب</span>
  <span class="wu-avatar purple" role="img" aria-label="تشن">ت</span>
  <span class="wu-avatar" role="img" aria-label="3 أعضاء آخرين">+3</span>
</div>

Load only the avatar group

@use "@wovenui/components/avatar-group";

The avatar group needs the avatar. The entry loads both; in the bundle, switching avatar off while avatar-group is on stops the compile with an error.