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 ContentsEdit this section, Opens in new window
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.
Where possible, link the avatar to details about the individual or group it
- 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.
- If an image fails to load, fall back to the default user avatar.
Avatars comes in different sizes.
If needed, you can wrap several avatars with
.if.stacked to stack them up: