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.
- Next to a name, 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.
- As decoration. An avatar stands for a specific person, so a random one misleads people.
Guidance
Do
AM
Pass the full name. It becomes the image description and the initials. Without it, a screen reader has nothing to announce.
Don't
A
Do not pass initials as the name. The component works out the initials itself, and screen reader users need the full name.
Intensity
How much attention each of this component's grounds uses, scored 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. Demanded is declared, and its use is limited. So neither of those two depends on the component alone. 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.