Avatar

data-avatar on a <span> of initials or on an <img> makes a round badge. data-avatars on a wrapper overlaps a group of them.

Basic

<p>
  <span data-avatar="lg">AR</span>
  <span data-avatar>PS</span>
  <span data-avatar="sm">CN</span>
</p>

The sizes are sm, the default, and lg; an <img data-avatar> is cropped to the same square.

A group

<p>
  <span data-avatars>
    <span data-avatar>AR</span>
    <span data-avatar style="background:var(--s72-go);color:var(--s72-go-fg)">PS</span>
    <span data-avatar style="background:var(--s72-info);color:var(--s72-info-fg)">+4</span>
  </span>
  on the hummingbird review
</p>

Inside data-avatars each badge gets a ring in the page colour and overlaps the one before it.

Notes

• The default colour is the soft tone; set background and color together to change one badge.
• Corners follow --s72-radius-pill, so avatars are square until you round it yourself.
• An <img data-avatar> still needs its alt; a <span> of initials usually needs none, because the name is next to it.