Avatar group

How to use it

Use to show who is involved in something -- a project, a document, a meeting -- in a compact row when the exact list is secondary. Update the aria-label count, each name and initials, and the hidden overflow text together. If people need to open the full list, put the group inside a button or link that goes to it; when every name matters, use a plain list of names instead.

Accessibility

The people are a <ul> labelled "Project members, 7 people", so a screen reader announces the list and its size before the items; each avatar is role="img" with the person's full name as its aria-label. The overflow chip shows "+3" visually but that text is aria-hidden and replaced by visually hidden text "and 3 more members", so it is read as words, not "plus three". Nothing is focusable, so it adds no tab stops. White initials on #1d4ed8, #0f766e and #7c3aed are 6.7:1, 5.5:1 and 5.7:1, and the dark #0f172a count on #e2e8f0 is 14.5:1.

Source (copy-ready)

Copy code

<div class="dcl-avatar-group">
  <ul class="dcl-avatar-group__list" role="list" aria-label="Project members, 7 people">
    <li class="dcl-avatar-group__item"><span class="dcl-avatar-group__face" role="img" aria-label="Priya Natarajan"><span class="dcl-avatar-group__initials" aria-hidden="true">PN</span></span></li>
    <li class="dcl-avatar-group__item"><span class="dcl-avatar-group__face dcl-avatar-group__face--teal" role="img" aria-label="Marcus Bell"><span class="dcl-avatar-group__initials" aria-hidden="true">MB</span></span></li>
    <li class="dcl-avatar-group__item"><span class="dcl-avatar-group__face dcl-avatar-group__face--violet" role="img" aria-label="Sofia Ortega"><span class="dcl-avatar-group__initials" aria-hidden="true">SO</span></span></li>
    <li class="dcl-avatar-group__item"><span class="dcl-avatar-group__face dcl-avatar-group__face--slate" role="img" aria-label="Daniel Okafor"><span class="dcl-avatar-group__initials" aria-hidden="true">DO</span></span></li>
    <li class="dcl-avatar-group__item">
      <span class="dcl-avatar-group__more"><span class="dcl-avatar-group__count" aria-hidden="true">+3</span><span class="dcl-avatar-group__sr">and 3 more members</span></span>
    </li>
  </ul>
</div>
<style>
.dcl-avatar-group { max-width: 100%; }
.dcl-avatar-group__list { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0 0 0 0.5rem; list-style: none; }
.dcl-avatar-group__item { margin-left: -0.5rem; }
.dcl-avatar-group__face, .dcl-avatar-group__more { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 2px solid #ffffff; border-radius: 50%; font: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1; color: #ffffff; background-color: #1d4ed8; }
.dcl-avatar-group__face--teal { color: #ffffff; background-color: #0f766e; }
.dcl-avatar-group__face--violet { color: #ffffff; background-color: #7c3aed; }
.dcl-avatar-group__face--slate { color: #ffffff; background-color: #475569; }
.dcl-avatar-group__initials { color: #ffffff; }
.dcl-avatar-group__more { color: #0f172a; background-color: #e2e8f0; }
.dcl-avatar-group__count { color: #0f172a; background-color: #e2e8f0; }
.dcl-avatar-group__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; color: #0f172a; background-color: #ffffff; }
</style>