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.
The default avatar is a fallback avatar used when a profile picture is not uploaded, or when the user is anonymous.
<span class="if avatar default"></span>
The headshot version is an avatar with a profile picture of a person.
<span class="if avatar largest" style="background-image: url(https://thispersondoesnotexist.com/image);"></span>
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.
<span class="if avatar largest yellow" data-initials="DD"></span>
If needed, you can wrap several avatars with
.if.stacked to stack them up: