Avatar can be used for displaying image, icon, or character on square or circle shaped elements. Put image, icon, or character into .avatar-display. Look the example below.

B

You can use these by extending .avatar-{color} class to avatar element

You can use these by extending .avatar-label-{color} class to avatar element

Border Avatar adds a styled border around avatars whether they contain an image, icon, or character. Use .avatar-border along with size classes like .avatar-xs to display avatars with consistent bordered styles.

B

Border Circle Avatar displays avatars in a rounded (circle) shape with a visible border. You can use images, icons, or characters inside by combining .avatar-border with .avatar-circle for circular bordered styles.

B

Addon can be replaced to top-start or bottom-end of avatar element. Use .avatar-addon and extend with .avatar-addon-{top|bottom} to set placement. You can put badge or marker into avatar addon.

9+

9+

Avatar Group allows you to display multiple avatars together in a single stack. Wrap the avatars inside .avatar-group to create a grouped layout.

3+

If you want to change avatar size, you can use .avatar-{sm|lg} helper classes

If you want to change avatar size, you can use .avatar-{sm|lg} helper classes

If you want to change avatar size, you can use .avatar-{sm|lg} helper classes