FeaturedNew
AvatarsInitials 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 frameworksIntermediate
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 | Type | Default | Description |
|---|---|---|---|
namerequired | string | - | Plan name shown as the heading. |
role | string | - | Job title shown beneath the name. |
className | string | - | Additional classes merged onto the root element. |
`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.