Avatar
An avatar is a graphical representation of a user and typically appears in list and card views, along side a user's information and/or content that they have created
All images in avatars are either machine learning generated from https://thispersondoesnotexist.com/, or of people that has granted the use of their image.
Table of Contents
Edit this section, Opens in new windowAvatar
An avatar is a graphical representation of a user and typically appears in list and card views, along side a user's information and/or content that they have created.
An avatar can either be a profile picture, a default profile placeholder or initials with background color.
They come in a variety of sizes. The size of an avatar varies depending upon the element it resides in as well as the size of the viewport.
Usage
Principles
-
Where possible, link the avatar to details about the individual or group it
represents:
- Where appropriate, link the avatar to a context-specific view of that individual or group. Otherwise, link to their canonical "profile" page.
- Don't link the avatar while it's shown on the individual's canonical "profile" page.
-
When there is no personal photo to show, use initials:
- Because personal names differ around the world, consider avoiding using initials that may not represent an individual accurately. You might show their full name instead.
- We tend to use the first letter of each space-separated word for initials and capitalize them. You may need to resize the initials text for more than 3 names.
- When there is no specific individual or group identified, use the default user avatar.
-
Loading:
- If an image fails to load, fall back to the default user avatar.
- Use an avatar to help people efficiently identify another person in the application visually.
- Use an avatar to distinguish people with the same name.
- Avoid an avatar when most people or groups won't have an image to show.
Sizing
Avatars comes in different sizes.
Default
Small
Large
Larger
Largest
Default
The default avatar is a fallback avatar used when a profile picture is not uploaded, or when the user is anonymous.
Headshot
The headshot version is an avatar with a profile picture of a person.
Initials
The initials avatar is a fallback avatar used when a profile picture could not be fetched, or when it is not natural to have a headshot.
Behaviours
Interactions
Focus
Modifiers
Stacked
If needed, you can wrap several avatars with .if.stacked to stack them up: