Avatars

Avatars are user profile pictures, usually found in circular shapes. We have sized avatars, squared/circular avatars, and avatars with borders.

Sized Avatars

There are 3 sizes available for the avatars - small, medium, and large. Use the class avatar-sm, avatar-md or avatar-lg depending on the requirement.
small avatar medium avatar large avatar 

<!-- add  class="avatar-sm", "avatar-md" or "avatar-lg"-->
<img src="source path" class="avatar-sm" alt="small avatar">

Squared Avatars

Avatars can have squared corners. Add a class squared to get the below results along with the preferred size.
small avatar medium avatar large avatar 

<!-- add  class="squared" with "avatar-sm", "avatar-md" or "avatar-lg"-->             
<img src="source path" class="avatar-md squared" alt="medium avatar - squared">

Bordered Avatars

For bordered avatars, add a class bordered to get the below results along with the preferred size and shape.
We have three colors available - border-red, border-green and border-grey.
small avatar medium avatar large avatar 

<!-- add  class="bordered" with "border-red", "border-green" or "border-grey"--> 
<img src="source path" class="bordered border-grey" alt="large avatar - bordered">
< Alerts Badges >