फ़ीचर्डनया
इमेजCaptioned Figure
An image and its caption tied together with figure and figcaption, in a rounded frame.
#image#figure#caption
2 फ्रेमवर्कशुरुआती
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 | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
avatarsआवश्यक | Avatar[] | - | ग्रिड में दिखाए जाने वाले लोग। |
max | number | 4 | Max |
label | string | - | लोड होते समय पढ़ा जाने वाला एक्सेसिबल लेबल। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
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.