Avatars

Avatars are used to identify users through display pictures or their initials.

An avatar consists of the display picture of the entity that it represents i.e. a user. In case a display picture is not available, it consists of a colored background and the initials of the name that it represents. And if somehow the initials can’t be fetched, a fallback glyph is used.

Types

Appearances

Avatar comes in 9 Appearances -

Sizes

Avatar comes in 2 sizes -

Usage

Color Assignment

The background colors to be used in the avatars should be generated dynamically such that at the time of its creation a random color (from the available options) is assigned. Once assigned, the color should stay the same as long as that particular avatar is in use.

For example, an avatar generated for a user - Franklin Clinton, can look like following and it will look the same wherever it is used.

Displaying Name

Since avatars can only show images or initials, there should be an option to show the full name of an entity. This can be achieved by hovering over on an avatar which displays a tooltip containing the full name.

Number of avatars

Avatars can be used individually or as a group if required. For example - If an activity is being done by 4 users, you would want to use the avatar group for the same.

To be specific, an avatar can be used in 3 ways as -

1. Single entity

2. Two entities

3. More than 2 entities In order to show the additional entities that are not visible upfront, a popover having the list of full names of those additional entities is shown on click.