Introduction
Getting Started
Colors
Typography
Elements
Button
Image
Input
List
Views
Alert
Avatar
Badge
Card
Modules
Grid
Modal
Navigation
Rating
Slider
Toast

Avatar

Avatars are used to represent user initials or user profile pictures. They help in visually representing user identity.

Rounded Avatar

Avatars are available in 3 sizes: size-lg, size-md and size-sm. For representing user avatar in circular shape, just add a class rounded to the img tag. 

            
              <img class="avatar rounded size-lg" src="procile_pic1.jpeg">

              <img class="avatar rounded size-md" src="profile_pic2.jpeg">

              <img class="avatar rounded size-sm" src="profile_pic3.jpeg">

Squared Avatar

For squared shaped avatars, add a class: squared

            
              <img class="avatar squared size-lg" src="profile_pic1.jpeg">

              <img class="avatar squared size-md" src="profile_pic2.jpeg">

              <img class="avatar squared size-sm" src="profile_pic3.jpeg">

Named Avatar

Named avatar can be displayed is you just want to add user initals for the avatar.

AS
AS
AS
            
              <div class="avatar rounded primary size-lg">AS</div>

              <div class="avatar squared success size-md">AS</div>

              <div class="avatar rounded warning size-sm">AS</div>