Avatar

Usage

Use an avatar to help people recognize a mechanic, driver or dispatcher at a glance — in assignment lists, work-order headers and comments. Don't use avatars for vehicles or depots; use an icon. An avatar never replaces the name: show the name next to it, or in its accessible name when space is tight.

• Image — profile photo, cropped to a circle.
• Initials — when there's no photo. Two letters, tone chosen by hashing the person's id so it is stable everywhere.
• Fallback icon — unknown or unassigned person ("Unassigned mechanic").
• Sizes — sm 32px (dense tables), md 40px (lists), lg 48px (headers, tablet).

Status text: "Available", "Busy · on WO-4191", "Off shift until 06:00" — always written, the dot only repeats it.

Anatomy

1. Container — .avatar, circle sized by --size-control-*
2. Content — img.avatar__img, or .avatar__initials, or svg.avatar__icon
3. Status dot (optional) — .avatar__status[data-status], with its own shape per status
4. Label (optional) — .avatar-label with name and detail text

Examples

States marked hover and focus-visible are frozen with .is-hover and .is-focus-visible. Those classes share their rule with the real pseudo-class; never use them in product code.

Avatar

Fallback order: photo → initials → generic icon.

IO LB SH

IO IO IO

Marta QuinteroAvailable · bay 2 LB Lena BrandtBusy · on WO-4191 SH Sami HaddadOff shift until 06:00

<!-- Photo; alt is the person's name -->
<span class="avatar"><img class="avatar__img" src="marta.jpg" alt="Marta Quintero"></span>

<!-- Initials; tone picked from a hash of the person's id -->
<span class="avatar avatar--tone-teal" role="img" aria-label="Idris Okafor">
  <span class="avatar__initials" aria-hidden="true">IO</span>
</span>

<!-- Name printed beside it: alt="", status in words -->
<span class="avatar-label">
  <span class="avatar"><img class="avatar__img" src="marta.jpg" alt=""><span class="avatar__status" data-status="available"></span></span>
  <span class="avatar-label__text"><span class="avatar-label__name">Marta Quintero</span><span class="avatar-label__detail">Available · bay 2</span></span>
</span>

API

Do and don't

Accessibility

Avatars are not interactive. If an avatar opens a profile, wrap it in a link whose name is the person's name.

• Photo: alt is the person's name, or alt="" when the name is visible beside it.
• Initials/icon alone: the container gets role="img" and aria-label with the full name; the letters are aria-hidden (otherwise "I O" is read).
• Status: the dot is decorative; status is in visible text (or .sr-only text in the name). Each status also has a distinct shape for color-blind users.
• Contrast: initials use contrast-checked pairs (text.default/bg.subtle, selected.fg/selected.bg, feedback.info.fg/feedback.info.bg).
• Forced colors: border and status dot render in CanvasText.

Tokens