Avatar

The avatar component is used to display profile picture or initials of the user. It can be found across all websites and apps.

Individual usage

large

medium

small

Avatar has 3 sizes large, medium and small and can be used as avatar-l, avatar-m, avatar-s respectively. The usage is shown in the following snippet.

Default :medium

Type class : avatar

Size class : avatar-lavatar-mavatar-s

Avatar with status

online

offline

dnd

Just change the class according to the required status.

Default :medium

Container class : avatar-status-container

Type class : avatar-status

Status class : avatar-onlineavatar-offlineavatar-dnd