फ़ीचर्डनया
अवतारInitials Avatar
Initials on a colour computed from the name - the same person gets the same colour on every page, with no image involved.
#avatar#initials#fallback
4 फ्रेमवर्कमध्यम
Loading…
The avatar-plus-text block every user list is made of, built so long names truncate instead of breaking the row.
<!--
The avatar is aria-hidden here - the visible name right beside it already
carries the identity, and labelling the picture too would announce every
person twice.
-->
<div class="avatar-id">
<span class="avatar-id__face" aria-hidden="true">SC</span>
<span class="avatar-id__text">
<span class="avatar-id__name">Sarah Chen-Nakamura</span>
<span class="avatar-id__role">Principal Product Designer</span>
</span>
</div>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
nameआवश्यक | string | - | हेडिंग के रूप में दिखने वाला प्लान का नाम। |
role | string | - | नाम के नीचे दिखने वाला पद। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
`min-w-0` on the text column is the whole trick and the first thing people delete: a flex child refuses to shrink below its content’s width by default, so without it a long name pushes the row wide and `truncate` silently does nothing - pair it with `shrink-0` on the avatar so the face never deflates instead. The avatar is `aria-hidden` here, deliberately the opposite of the standalone avatars: the visible name beside it already carries the identity, and labelling the picture too would announce every person in a fifty-row list twice. `max-w-xs` is a demo constraint - in a real table cell, drop it and let the column width do the constraining. If the block becomes a link to a profile, put the anchor around the whole row, not just the name, so the tap target is the full 40px-tall block.