{
  "title": "Avatar",
  "path": "/components/avatar",
  "url": "https://design.werklist.com/components/avatar",
  "text": "https://design.werklist.com/agent/components/avatar",
  "summary": "A person's photo or initials in a circle, alone or in a stack, and how it names the person to a screen reader.",
  "version": "2.1.2",
  "kind": "component",
  "name": "Avatar",
  "purpose": "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.",
  "use": [
    "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."
  ],
  "avoid": [
    "Notification cards that pop up, and empty states.",
    "Initials as the only label of a person.",
    "A ring or an edge on a face."
  ],
  "anatomy": [
    {
      "part": "Shape",
      "measure": "a circle",
      "token": "--radius-full"
    },
    {
      "part": "Photo",
      "measure": "covers the disc, centered, with no edge"
    },
    {
      "part": "Initials",
      "measure": "the first letters of the first and last name, two at most, in white at weight 700",
      "token": "--on-brand"
    },
    {
      "part": "Fill without a photo",
      "measure": "one of 8 gradients, picked from the name, light at the top left and deep at the bottom right"
    },
    {
      "part": "Team or company mark",
      "measure": "a 12 px disc at 24 px and a 14 px disc at 32 px, in the bottom corner",
      "token": "--surface-strong"
    },
    {
      "part": "No name at all",
      "measure": "a person icon on a gray disc",
      "token": "--surface-control"
    }
  ],
  "variants": [
    {
      "name": "Photo",
      "use": "the person uploaded a picture"
    },
    {
      "name": "Initials",
      "use": "no picture, or the picture failed to load"
    },
    {
      "name": "Team",
      "use": "a team, with a small mark in the corner"
    },
    {
      "name": "Company",
      "use": "a company, with a small mark in the corner"
    },
    {
      "name": "Stack",
      "use": "several people in a narrow cell: up to 4 faces, then a count"
    },
    {
      "name": "Person row",
      "use": "the avatar, the name and one line in a lighter ink, such as a role"
    }
  ],
  "sizes": [
    {
      "name": "24 px, board cells and stacks",
      "height": "24 px",
      "type": "initials 10 px"
    },
    {
      "name": "32 px, the default",
      "height": "32 px",
      "type": "initials 12 px"
    },
    {
      "name": "40 px, the header of a person's panel",
      "height": "40 px",
      "type": "initials 13 px"
    },
    {
      "name": "56 px, a profile",
      "height": "56 px",
      "type": "initials 18 px"
    }
  ],
  "states": [
    {
      "name": "Loading",
      "change": "the initials show until the photo arrives"
    },
    {
      "name": "Photo failed",
      "change": "the initials stay"
    },
    {
      "name": "Hover",
      "change": "a tooltip with the person's name, after 500 ms"
    },
    {
      "name": "Keyboard focus",
      "change": "the focus ring, 2 px, offset 2 px",
      "tokens": [
        "--focus-ring"
      ]
    },
    {
      "name": "Touch",
      "change": "the target grows to 44 px and the drawing stays the same"
    }
  ],
  "keys": [
    {
      "key": "Tab",
      "action": "moves to an avatar or a stack that opens something"
    },
    {
      "key": "Enter or Space",
      "action": "opens the profile or the card"
    },
    {
      "key": "Escape",
      "action": "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"
  ],
  "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."
  ]
}