Example of Default Functionalities in Blazor CSS Avatar Component

This sample demonstrates default and circular avatars. Apply the .e-avatar class for the default avatar and .e-avatar-circle for a circular avatar.

The Avatar is a pure CSS component used to represent profile pictures, initials, or icons in a presentable way. It supports two shapes:

• Default avatar: Add .e-avatar to the target element.
• Circle avatar: Add .e-avatar-circle to the target element.

The Avatar supports five sizes via modifier classes:

• xSmall: .e-avatar-xsmall
• Small: .e-avatar-small
• Default: .e-avatar (no additional class required)
• Large: .e-avatar-large
• xLarge: .e-avatar-xlarge

The .e-avatar class is the base class and must be included to use any avatar features.

Images can be added to the avatar in two ways:

• Using the CSS background property on the avatar element (no additional element needed)
• Using an <img> tag wrapped by the avatar element