Avatar
Circular indicator for a user or entity. Mirrors Figma node 125-2432 (light) + 5914-6626 (dark) 1:1. Three fill variants — Icon (person silhouette), Initials (1–2 letters), Image (clipped photo). Four sizes (xs 24 / sm 32 / md 40 / lg 48). The disc is a blue #3156DF surface with white content and a 1px black-10% hairline — identical in light and dark per Figma. Hover keeps the same background and signals interactivity with a 10% black scrim. Composes with Badge for a count pill (top-right) and a status dot (bottom-right) via the .avatar-stack + .avatar-pin-* anchors.
When to use
- Use to represent a user, team member, or entity with a face/initials/image
- Use Image variant when the user has a profile photo
- Use Initials when no photo is available — 1 or 2 characters maximum
- Use Stack (
.avatar-stack) for showing multiple users at once (e.g. "3 collaborators") - Compose with Badge for notification counts or status indicators
- Use for decorative icons unrelated to a person or entity — use the SVG sprite directly
- Use more than 5 avatars in a stack without a "+N" overflow indicator
- Use initials longer than 2 characters
- Use Avatar as a navigation element without a visible label nearby
DigiLawyer Patterns
No specific DigiLawyer patterns documented yet — to be added.
Anatomy
An Avatar is a circular disc with an inner content slot (icon, initials, or image) and optional composition anchors for Badge and status dot.
- 1Disc —
.avatar. The circular container. Blue bg, white content, 1px hairline border. - 2Content —
.avatar-icon/.avatar-initials/.avatar-image. Mutually exclusive fill variants. - 3Status dot —
.avatar-status. Online (green) / offline (grey) indicator, bottom-right. - 4Badge pin —
.avatar-pin-tr/.avatar-pin-bretc. Anchors a Badge at a corner of the disc. - 5Stack wrapper —
.avatar-stack. Negative margin creates the overlapping group effect.
Default
A bare .avatar at the default md size, Initials variant. Add a fill variant (.avatar-icon / .avatar-initials / .avatar-image) and an optional size (.avatar-lg / -sm / -xs).
Variants
Three fill variants. Icon wraps the #ico-avatar-person silhouette (any inline SVG works — it inherits currentColor). Initials holds 1–2 letters in Semi Bold. Image clips an <img> to the circle (shown here with gradient placeholders standing in for photos). All three share the same disc chrome — blue bg, white content, black-10% hairline.
Sizes
Four sizes mapped 1:1 to Figma's symbol names. .avatar-lg 48 px (initials Heading 6b 20/24); default md 40 px (16 px); .avatar-sm 32 px (Caption 1 12/16); .avatar-xs 24 px (Caption 2 10/12). The icon scales to ~56% of the diameter at every size.
States
Two states. Default renders the blue disc. Hover keeps the same background (Figma 1:1) and overlays a 10% black scrim to signal the avatar is interactive — use it when the avatar is a button / link (account menu trigger, profile link). .is-hover forces the scrim at rest for the docs; :hover handles the live state. A non-interactive avatar (pure presence indicator) needs no hover.
Composition
Wrap an avatar in .avatar-stack to pin a Badge count to the top-right (.avatar-pin-tr) and a status dot to the bottom-right (.avatar-pin-br). The count is the canonical .badge.badge-label.badge-danger; the status dot is .avatar-status with a page-bg ring and one of -online / -busy / -away / -offline. Add .avatar-stack-lg / -sm / -xs to scale the status dot with the avatar.
Full matrix
3 variants × 4 sizes. Toggle the theme switch in the global header to confirm dark-mode parity — Figma reports identical disc tokens in both modes (blue bg, white content, black-10% hairline), so the only cross-mode change is the page surface the avatars sit on.
Accessibility
| Attribute / Behaviour | Value | Notes |
|---|---|---|
| Image alt text | alt="User's name" | Always provide descriptive alt text on <img> avatars |
| Initials avatar | aria-label="AD (Adesh Singh)" | Initials are not self-explanatory — add a full name via aria-label |
| Icon avatar | aria-label="Unknown user" | Generic icon needs a label describing the entity |
| Interactive avatar | <button> wrapping | If the avatar is clickable, wrap it in a <button> or <a> |
| Status dot | aria-label="Online" on dot | Colour alone is not accessible — add a text label or aria-label |
API
| Class / attr | On | Description |
|---|---|---|
| .avatar | <span> | Base. 40 px (md) circular disc — blue --avatar-bg, white --avatar-text, 1px --avatar-border hairline, overflow: hidden to clip the Image variant. Semi Bold. Add a variant + size. |
| .avatar-icon | .avatar | Icon variant — wrap an inline SVG (e.g. #ico-avatar-person). The SVG sizes to ~56% of the diameter and inherits currentColor. |
| .avatar-initials | .avatar | Initials variant — 1–2 letters of text. Font scales per size: 20 / 16 / 12 / 10 px (lg / md / sm / xs). |
| .avatar-image | .avatar | Image variant — drop an <img> inside; it's clipped to the circle via object-fit: cover. Empty shows a grey placeholder. |
| .avatar-lg / -sm / -xs | .avatar | Sizes — 48 / 32 / 24 px. Default (no class) is md 40 px. |
| .is-hover / :hover | .avatar | Interactive hover — overlays a 10% black scrim (--avatar-overlay-hover). Use only when the avatar is a button / link. |
| .avatar-stack | <span> | Composition wrapper. Shrink-wraps the avatar (position: relative) so pinned Badge + status dot anchor to its corners without being clipped by the avatar's overflow: hidden. Add .avatar-stack-lg / -sm / -xs to scale the status dot. |
| .avatar-pin-tr | .badge inside .avatar-stack | Pins a Badge count to the top-right (sits half-outside the circle corner). Use with .badge.badge-label.badge-danger or .badge.badge-dot. |
| .avatar-pin-br | .avatar-status inside .avatar-stack | Pins the status dot to the bottom-right, sitting on the circle edge. |
| .avatar-status | <span> | Status dot — a small disc with a 2px page-bg ring for separation. Pair a colour: -online (green) / -busy (red) / -away (yellow) / -offline (grey). |
| --avatar-bg / -text / -border | Token | Disc surface, content colour, hairline. Identical in light + dark per Figma. |
| --avatar-bg-hover / -overlay-hover | Token | Hover background (equals --avatar-bg) + the 10% black interactive scrim. |