• Material
  • Fabric
  • Bootstrap
  • High Contrast
Preferences
Theme Selection
Mode Selection
Touch
Mouse

Chart

This sample demonstrates the default avatar and circle avatar for which the .e-avatar and .e-avatar-circle class needs to be added respectively to the target element.

DEMO
SOURCE
Default
Circle

The avatar is developed in pure CSS which is used to represents the profile picture or initials or icons in presentable way. It comes with two different shapes, they are listed below.

  • Default Avatar - To apply default avatar add .e-avatar class to the target element.
  • Circle Avatar - To apply circle avatar add .e-avatar-circle class to the target element.

The avatar comes with 5 different sizes, which can be applied through modifier classes. They are listed below.

  • xSmall Avatar - The xSmall avatar can be applied by adding .e-avatar-xsmall
  • Small Avatar - The Small avatar can be applied by adding .e-avatar-small
  • Default Avatar - The Default avatar can be applied by adding .e-avatar, No additional class needed for this.
  • Large Avatar - The Large avatar can be applied by adding .e-avatar-large
  • xLarge Avatar - The xLarge avatar can be applied by adding .e-avatar-xlarge

The .e-avatar is the main class which needs to be included in an element to use any of the other avatar features.

The imgaes can be added in two different way to the avatar.

  • Using CSS background property on the avatar element, which doesn’t require any additional element.
  • Using image tag, the image tag needs to be wrapped by the avatar element.