Skip to main content

Components

Avatar

A graphical representation of an object or entity

banner-Avatar

Anatomy

Avatars are visual representations of people or entities and are often displayed within lists or cards

banner guideline avatar
  1. Container : a container that can be used for place image icon or initals to represent some entity
  2. 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.

Alt text

Do : With Initial

Use the default alternative if no image source is available. This will be the first character of the provided name

Alt text

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.
Alt text

Do : With label

Use text label although there is already an image in the avatar

Alt text

Don't : Without label

Leave without text label to give information about a person