Avatar
An avatar is a visual representation of a user or entity.
When to use
- Showing who did something, such as who is assigned or who commented.
- A list of people, where faces are quicker to scan than names.
- Alongside a name rather than instead of it, wherever there is room for both.
When not to use
- As the only identification. Initials are ambiguous and photographs are not always recognisable.
- For a file, a document or a content type. That is an object icon or a tile.
- Decoration. An avatar claims a specific person, so an arbitrary one is a lie.
Guidance
Do
AM
Give the real name. It becomes the description and the initials, so an avatar without one says nothing to a screen reader.
Don't
A
Do not pass initials as the name. The component derives initials itself, and the full name is what a reader needs.
Intensity
What each of this component's grounds spends, measured against the ladder in both themes.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| avatar | brand-bold | 0.460Marked | 0.598Marked |
| avatar | danger-bold | 0.443Marked | 0.617Marked |
| avatar | green-bright | 0.373Marked | 0.610Marked |
| avatar | gray-bold | 0.350Marked | 0.477Marked |
| avatar | accent-gray-subtler | 0.099Ambient | 0.236Marked |
Substrate, Ambient and Marked are measured. Directed depends on what else is in the region, and Demanded is declared and rationed, so neither is a property this component carries by itself. See intensity.
Content
What to write, and what to leave out.
- Use the full name as it is displayed elsewhere in the product.
- For a team or a project, use its name and the square appearance.
- Do not add a role or a status to the name. Those belong beside the avatar.