Avatar
Avatar is used to identify users through display pictures or their initials.
Usage
Code
An avatar consists of a 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.
Appearances
Avatar comes in 9 appearances -
Sizes
Avatar comes in 2 sizes - small and regular.
Structure
| Property | Value(s) |
|---|---|
| Size |
Configurations
| Property | Value(s) | Default value |
|---|---|---|
| Appearance | - | |
| Size | Regular | |
| First name | <first_name> | - |
| Last name | <last_name> | - |
| Outline | <color> | Namak |
| Additional users | <count> | - |
Usage
Color assignment
The background color of an avatar should be generated dynamically in such a way 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 should look the same wherever it is used.
Color assignmentDisplaying Name
Since an avatar can only show an image or the initials, there should be an option to show the full name of the entity. This is achieved by hovering over on the avatar to display a tooltip containing the full name.
Hovering on an avatarNumber of avatars
Avatars can be used individually or as a group if required. For example - if an activity is being performed by 4 users, an avatar group should be used to represent them.
To be specific, an avatar can be used in 3 ways as -
Single entity
Single avatarTwo entities
Two avatarsMore than 2 entities
More than 2 avatarsIn 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 hover.
Showing list of names in an avatar groupWas this page helpful?