Components
Avatar
A graphical representation of an object or entity
Anatomy
Avatars are visual representations of people or entities and are often displayed within lists or cards
- Container : a container that can be used for place image icon or initals to represent some entity
- Badge (Optional) : an optional element that can show current status or information to support the avatar
Usage
The typical usage for an avatar is to represent the current user in the masthead. However, based on your product’s use cases and needs, there is room for customization.
Common places avatar appear: Cards, accordions, data lists, tables, etc
When to use
- Avatar is a visual used to represent an entity or an object.
- Use an avatar to help people efficiently identify another person or company in the platform visually.
When not to use
- Don’t use single avatar represent an entity or group.
- Avoid photos that don’t fill the avatar mask.
Accessibility
Avatars make identifying a person, team or organization more efficient, while still allowing users to express themselves. An avatar is a visual used to represent a user. It may contain an image or a placeholder graphic. Typical usage is to represent the current user in the masthead. Keyboard users shouldn’t be able to interact with the avatar on its own.
Do : With Initial
Use the default alternative if no image source is available. This will be the first character of the provided name
Don't : Without image or initial
Don’t use alternative graphics or icons to provide the profile. Used avatar with image for better option
Content
When creating avatar :
- A text label identifies the subject of the avatar.
- Prioritize images and icons over text.
- Use inline avatars to mention people in a sentence.
- You can use badge to indicate one status.
- Avoid using landscape or portrait images as avatars. Let users crop their images before or after uploading if possible.
Do : With label
Use text label although there is already an image in the avatar
Don't : Without label
Leave without text label to give information about a person
Do you have feedback?
Please let us know to make it better