kit

Avatar

A person's photo or initials, in three sizes, and overlapping groups with a count for the rest.

Tier 1 · CSS only Image preview

Example

ABCDEFGHIJ
SMMDLG
A group of five
Show the markup 
<div class="demo-stack">
  <div class="demo-row"><span class="kit-avatar" data-tone="1" role="img" aria-label="Person A">AB</span><span class="kit-avatar" data-tone="2" role="img" aria-label="Person B">CD</span><span class="kit-avatar" data-tone="3" role="img" aria-label="Person C">EF</span><span class="kit-avatar" data-tone="4" role="img" aria-label="Person D">GH</span><span class="kit-avatar" data-tone="5" role="img" aria-label="Person E">IJ</span></div>
  <div class="demo-row"><span class="kit-avatar" data-size="sm" data-tone="2" role="img" aria-label="Small">SM</span><span class="kit-avatar" data-tone="2" role="img" aria-label="Medium">MD</span><span class="kit-avatar" data-size="lg" data-tone="2" role="img" aria-label="Large">LG</span></div>
  <div class="demo-row">
    <span class="kit-avatar-group" role="img" aria-label="Person A, Person B, Person C and 2 others"><span class="kit-avatar" data-tone="1" aria-hidden="true">AB</span><span class="kit-avatar" data-tone="2" aria-hidden="true">CD</span><span class="kit-avatar" data-tone="3" aria-hidden="true">EF</span><span class="kit-avatar" data-more aria-hidden="true">+2</span></span>
    <span class="demo-note">A group of five</span>
  </div>
</div>

Usage

<span class="kit-avatar" data-tone="2">AB</span>
<span class="kit-avatar"><img src="/avatars/person-a.jpg" alt=""></span>
<span class="kit-avatar-group" role="img" aria-label="Person A, Person B, Person C and 2 others">
  <span class="kit-avatar" data-tone="1">AB</span> … <span class="kit-avatar" data-more>+2</span>
</span>
Attribute Values Default
data-tone 1 to 6, a colour from the data series 1
data-size sm, md, lg md

Pick the tone from the person (say, a hash of their id), so each person keeps their colour everywhere.

Accessibility

  • An avatar next to the person's name is decoration: alt="" on a photo; initials are read as letters, so put aria-hidden="true" on them when the name is already beside them.
  • An avatar on its own needs the name: role="img" and aria-label="Person A".
  • A group says who's in it, in one label, rather than reading out each set of initials.
  • Initials are white on darkened colours that pass WCAG AA in light and dark.