• Bootstrap v5
  • Bootstrap v5 Dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Bootstrap v4
  • Fabric
  • Fabric Dark
  • High Contrast
Preferences
Theme Selection
Mode Selection
Touch
Mouse
Localization
*Translated by Google Translator.
Currency
Essential Studio
HOME
All Controls

Example of Default in ASP.NET Core Avatar Control

This sample demonstrates the default avatar and circle avatar in which the .e-avatar and .e-avatar-circle classes should be added, respectively to the target element.

DEMO
SOURCE
Default
Circle

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

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

The avatar comes with 5 different sizes, and are applied through modifier classes. They are:

  • xSmall avatar: This can be applied by adding the .e-avatar- class.
  • Small avatar: This can be applied by adding the .e-avatar-small class.
  • Default avatar: This can be applied by adding the .e-avatar class. No additional class is needed for this.
  • Large avatar: This can be applied by adding the .e-avatar-large class.
  • xLarge avatar: This can be applied by adding the .e-avatar-xlarge class.

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

The images can be added in the following two different ways to the avatar:

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