# Avatar

A person's photo, or their initials on their own gradient, in a circle beside their name. Teams and companies take the same circle with a small mark in the corner.

* Kind: component
* Page: https://design.werklist.com/components/avatar
* Version: 2.1.2

## When to use it

* Beside a name wherever people act: comments, assignees, chat, the activity history, the notification center and the people column of a board.
* Alone only where the row is too narrow for the name, with the name in a tooltip and for screen readers.

## When not to use it

* Notification cards that pop up, and empty states.
* Initials as the only label of a person.
* A ring or an edge on a face.

## Rules

* A stack shows up to 4 faces, each overlapping the next by 6 px, then a disc with the count of the rest.
* The faces stand bare. The count disc keeps a 2 px ring.
* Hover or focus on a stack opens a card with everyone on it, 240 px wide, with 12 px corners and 8 px inside.
* A person keeps the same color on every screen.

## Anatomy

* Shape: a circle (--radius-full)
* Photo: covers the disc, centered, with no edge
* Initials: the first letters of the first and last name, two at most, in white at weight 700 (--on-brand)
* Fill without a photo: one of 8 gradients, picked from the name, light at the top left and deep at the bottom right
* Team or company mark: a 12 px disc at 24 px and a 14 px disc at 32 px, in the bottom corner (--surface-strong)
* No name at all: a person icon on a gray disc (--surface-control)

## Variants

* Photo: the person uploaded a picture
* Initials: no picture, or the picture failed to load
* Team: a team, with a small mark in the corner
* Company: a company, with a small mark in the corner
* Stack: several people in a narrow cell: up to 4 faces, then a count
* Person row: the avatar, the name and one line in a lighter ink, such as a role

## Sizes

* 24 px, board cells and stacks: height 24 px, type initials 10 px
* 32 px, the default: height 32 px, type initials 12 px
* 40 px, the header of a person's panel: height 40 px, type initials 13 px
* 56 px, a profile: height 56 px, type initials 18 px

## States

* Loading: the initials show until the photo arrives
* Photo failed: the initials stay
* Hover: a tooltip with the person's name, after 500 ms
* Keyboard focus: the focus ring, 2 px, offset 2 px (--focus-ring)
* Touch: the target grows to 44 px and the drawing stays the same

## Keyboard

* Tab: moves to an avatar or a stack that opens something
* Enter or Space: opens the profile or the card
* Escape: closes the card, and focus stays on the stack

## Accessibility

* When the name is written beside the avatar, the avatar is hidden from screen readers so the name is read once.
* When the avatar stands alone, it carries the name: the photo's alt text, or a label on the initials.
* A stack names the faces it shows and counts the rest in the label of its button, for example Assigned to Ana Horvat, Rajesh Kumar, Maria Santos, Luka Perić and 3 others.
* The name is always written or announced. Initials never stand alone.

## Content

* The initials come from the name the person shows, two letters at most.
* The count disc reads as a plus and the number of the rest, such as +3, in tabular digits.

## Tokens

* --radius-full
* --on-brand
* --surface-1
* --surface-strong
* --surface-control
* --focus-ring