Avatars

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

Usage
Code

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.


Appearances

Avatar comes in 9 Appearances -

Sizes

Avatar comes in 2 sizes -


Properties

PropertyValue(s)Default value
Appearance
  • Jal
  • Stone
  • Neem
  • Haldi
  • Mirch
  • Tawak
  • Nimbu
  • Neel
  • Jamun
  • -
    Size
  • Regular
  • Tiny
  • Regular
    Outline<color>Namak
    Additional users<count>-

    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.

    Color Assignment

    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.

    Displaying 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
    Single entity
    1. Two entities
    Two entities
    1. More than 2 entities 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.
    Showing list of full names