FeaturedNew
ImagesCaptioned Figure
An image and its caption tied together with figure and figcaption, in a rounded frame.
#image#figure#caption
2 frameworksBeginner
Loading…
A row of overlapping circular photos with an overflow count - who is here, at a glance.
<!-- The overlap is decorative, so each ring-2 keeps the faces separable. One
group label carries the meaning for assistive tech; individual alts stay
empty to avoid a spoken pile of names. -->
<div class="flex items-center gap-3">
<ul class="flex -space-x-3" aria-label="7 people are attending">
<li><img src="/images/avatar-1.jpg" alt="" class="h-9 w-9 rounded-full object-cover ring-2 ring-white dark:ring-gray-950" /></li>
<li><img src="/images/avatar-2.jpg" alt="" class="h-9 w-9 rounded-full object-cover ring-2 ring-white dark:ring-gray-950" /></li>
<li><img src="/images/avatar-3.jpg" alt="" class="h-9 w-9 rounded-full object-cover ring-2 ring-white dark:ring-gray-950" /></li>
<li><img src="/images/avatar-4.jpg" alt="" class="h-9 w-9 rounded-full object-cover ring-2 ring-white dark:ring-gray-950" /></li>
<li>
<span class="flex h-9 w-9 items-center justify-center rounded-full bg-gray-100 text-xs font-semibold text-gray-600 ring-2 ring-white dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-950">+3</span>
</li>
</ul>
<span class="text-sm text-gray-600 dark:text-gray-400">attending</span>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
avatarsrequired | Avatar[] | - | The people shown in the grid. |
max | number | 4 | Max |
label | string | - | Accessible label announced while loading. |
className | string | - | Additional classes merged onto the root element. |
The overlap is decorative, so each avatar gets a `ring-2` in the surface colour to stay separable, and the individual `alt` values are empty - one `aria-label` on the list carries the meaning so a screen reader is not read a pile of names. The `max` prop caps the shown faces and rolls the rest into a `+N` chip. Swap `-space-x-3` for `-space-x-2` in the compact variant.