Avatar

Avatar shows a person or a workspace as a small picture, with initials as the fallback. It has three sizes that match the control heights and two shapes.

Public web API

One root hook on a <span>, initials as text, and an optional image.

<!-- Decorative, beside a visible name -->
<span data-bitsy-avatar aria-hidden="true">
  JK
  <img src="/u/justin.jpg" alt="">
</span>
<span>Justin Kuntz</span>

<!-- On its own -->
<span data-bitsy-avatar data-bitsy-size="sm" role="img" aria-label="Justin Kuntz">
  <span aria-hidden="true">JK</span>
</span>

<!-- Workspace -->
<span data-bitsy-avatar data-bitsy-shape="square" aria-hidden="true">AC</span>

data-bitsy-shape="square" is for workspaces; omit it for the circle.
data-bitsy-size="sm" and "lg" match the Button heights; md is the default.
Beside a visible name, hide the Avatar and leave the image alt empty so the name is not read twice.
Keep the fallback to one or two letters.
Engines draw a broken-image glyph for a failed <img>, even with an empty alt. If the URL may fail, leave the image out or remove it with an error handler.

Shapes and sizes

The image covers the initials once it loads. With no image, the initials stay.

Circle with an image

Circle with initials

Square, for a workspace

Beside a name, and on its own

Justin Kuntz

Foundation versus Bit

The foundation styles <img> but has no fixed square frame, cropping, or initials fallback. data-bitsy-avatar adds the frame, sizes that line up with controls, and the shape, with no JavaScript. An avatar group and a presence dot are deferred.