COMPONENT

Avatar

A person, at one of five sizes. Initials by default, an image when you have one, a status dot when you need it, and a stack for “these four people”.

Five sizes

24, 32, 40, 56, 72. At each rung the box and its text are a measured pair.

NN NN NN NN NN

HTML

<span class="avatar avatar-24">NN</span>
<span class="avatar avatar-32">NN</span>
<span class="avatar avatar-40">NN</span>
<span class="avatar avatar-56">NN</span>
<span class="avatar avatar-72 avatar-deep">NN</span>

Status, empty and stacked

NN AB IMG NN AB CD +6

HTML

<span class="avatar-slot">
  <span class="avatar avatar-56">NN</span>
  <span class="avatar-status"></span>
</span>
<span class="avatar-slot">
  <span class="avatar avatar-56 avatar-quiet">AB</span>
  <span class="avatar-status avatar-status-away"></span>
</span>
<span class="avatar avatar-56 avatar-empty">IMG</span>
<span class="avatar-stack">
  <span class="avatar avatar-40">NN</span>
  <span class="avatar avatar-40 avatar-deep">AB</span>
  <span class="avatar avatar-40 avatar-quiet">CD</span>
  <span class="avatar avatar-40 avatar-empty">+6</span>
</span>

Reference

Read from components/avatar.css when this page was built, so it cannot fall behind the stylesheet.

CLASSES.avatar.avatar-24.avatar-32.avatar-40.avatar-56.avatar-72.avatar-deep.avatar-quiet.avatar-empty.avatar-slot.avatar-status.avatar-status-away.avatar-stack

READS--ds-accent--ds-accent-deep--ds-avatar-24--ds-avatar-24-text--ds-avatar-32--ds-avatar-32-text--ds-avatar-40--ds-avatar-40-text--ds-avatar-56--ds-avatar-56-text--ds-avatar-72--ds-avatar-72-text--ds-avatar-dot--ds-avatar-overlap--ds-caption-on-cool--ds-cream--ds-focus-width--ds-font-display--ds-hairline--ds-ink-faint--ds-ink-on-accent--ds-ink-on-cream--ds-ink-soft--ds-radius-round--ds-raised--ds-rule-strong--ds-sunk--ds-text-meta--ds-tint-cool--ds-track-meta--ds-track-subtle

Notes

WHY THE SIZE IS A MODIFIER AND NOT A NUMBER

Because the font size has to move with the box, and the two are not proportional at the small end: 24px takes 9px initials and 72px takes 22px. Interpolating gives 11px at 32 — where the design says 11, by measurement rather than by arithmetic. Each rung is measured.

In a stack, each avatar carries a ring in the surface colour behind it. Set --avatar-ring when the stack is not on a sunk surface, or the rings cut holes in it.

ALT TEXT

An avatar image almost always sits next to the person's name, and in that case it wants alt="" — a duplicated name is noise in a screen reader. This component cannot know, so the caller must decide.