Avatar

Avatars are one of the most important components as they can be used to show a user's profile picture.

Image Avatar

You can use image avatar by adding avatar-image class to existing classes. A total of 5 sizes are available: xl, l, m, s, xs. To use the different variants add class avatar followed by size. Example: avatar-xl.

avatar-img
avatar-img
avatar-img
avatar-img
avatar-img

Text Avatar

You can use text avatar by adding class avatar-text. A total of 5 sizes are available: xl, l, m, s, xs.

MB
MB
MB
MB
MB

Squared Avatar

You can use squared avatar by adding class avatar-squared. Do not forget to specify the size and type of avatar.

avatar-img
MB

Avatars with shadow

You can use shadowed avatar by adding class avatar-shadow. Do not forget to specify the size and type of avatar.

MB
MB