mostlycss
Theme

Avatar

span.avatar

Avatar — a person or entity's picture, with initials as the fallback.

Examples

Picture, initials, and a group

View “Picture, initials, and a group” as
<span class="avatar">
  <span class="avatar-initials" aria-hidden="true">AL</span>
</span>
<span class="avatar avatar-lg">
  <span class="avatar-initials" aria-hidden="true">GH</span>
</span>
<span class="avatar-group">
  <span class="avatar"><span class="avatar-initials" aria-hidden="true">AL</span></span>
  <span class="avatar"><span class="avatar-initials" aria-hidden="true">GH</span></span>
  <span class="avatar"><span class="avatar-initials" aria-hidden="true">+3</span></span>
</span>

Beside the person’s name, write alt="" — otherwise the name is read twice.

Standing alone, write alt="Ada Lovelace", because the avatar is then the only mention of them. Never alt="Avatar": it describes the widget in the one place the widget is irrelevant.

Tokens 13

Level 2, declared on .avatar itself. Set any of them on that selector to restyle this component without touching the skin.

Level 2 tokens declared by avatar
TokenDefault
--avatar-bgvar(--color-surface-sunken)
--avatar-colorvar(--color-on-surface)
--avatar-overlapcalc(var(--avatar-size) * 0.25)
--avatar-ring-width0px
--avatar-size2.5rem
--avatar-status-colorvar(--color-on-surface-subtle)
--avatar-status-sizecalc(var(--avatar-size) * 0.28)
--avatar-font-familyvar(--font-secondary)
--avatar-font-sizecalc(var(--avatar-size) * 0.4)
--avatar-font-weightvar(--font-weight-semibold)
--avatar-border-colorvar(--color-border)
--avatar-border-widthvar(--border-width)
--avatar-radiusvar(--radius-full)

Variants and states

Variants

  • .avatar-lg
  • .avatar-more
  • .avatar-sm
  • .avatar-square
  • .avatar-status-away
  • .avatar-status-busy
  • .avatar-status-online
  • .avatar-xl

Inside it

  • .avatar-group
  • .avatar-status
  • .avatar-img
  • .avatar-initials

State it reads

None.

Before you ship it

What you have to do 4 requirements

  1. Decide the alt per context. Beside the person's name, write alt="" — the picture adds nothing and alt="Ada Lovelace" makes the name be read twice. Standing alone, write the name. Never alt="Avatar".
  2. Keep .avatar-initials aria-hidden="true". It is a visual shorthand, never a name.
  3. Name the root once where the avatar stands alone with initials rather than a photograph: role="img" plus aria-label.
  4. Wrap it in a <button> or <a> if it does something. The avatar is not a control and has no focus ring of its own.

src/css/components/avatar.css · npx mostlycss add avatar