Avatar

Avatar are used to show profile images. They can be in different shapes and sizes.

Simple Avatar

Use the class .avatar to get a simple avatar.

avatar-img 

<img src="" alt="avatar-img" class="avatar"/>
Square Avatar

Use the class .avatar and use .avatar-sq get a square avatar.

avatar-img 

<img src="" alt="avatar-img" class="avatar avatar-sq">
Avatar Size

Use the class .avatar and use .avatar-sm for small, .avatar-lg for large, .avatar-xl for extra-large avatar. Adding class .avatar-sq will give square avatars in required sizes.

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

<img src="" alt="avatar-img" class="avatar avatar-sm" />

<img src="" alt="avatar-img" class="avatar" />
                
<img src="" alt="avatar-img" class="avatar avatar-lg" />
                
<img src="" alt="avatar-img" class="avatar avatar-xl" />

<img src="" alt="avatar-img" class="avatar avatar-sq avatar-sm" />

<img src="" alt="avatar-img" class="avatar avatar-sq" />

<img src="" alt="avatar-img" class="avatar avatar-sq avatar-lg" />

<img src="" alt="avatar-img" class="avatar avatar-sq avatar-xl" />
Avatar with border

Use the class .avatar and use .avatar-border for avatar with border.

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

<img src="" alt="avatar-img" class="avatar avatar-sm avatar-border" />

<img src="" alt="avatar-img" class="avatar avatar-border" />
                
<img src="" alt="avatar-img" class="avatar avatar-lg avatar-border" />
                
<img src="" alt="avatar-img" class="avatar avatar-xl avatar-border" />
                
<img src="" alt="avatar-img" class="avatar avatar-sq avatar-sm avatar-border" />
                
<img src="" alt="avatar-img" class="avatar avatar-sq avatar-border" />
                
<img src="" alt="avatar-img" class="avatar avatar-sq avatar-lg avatar-border" />
                
<img src="" alt="avatar-img" class="avatar avatar-sq avatar-xl avatar-border" />
Avatar with badge

Use the class .badge and use .badge-online for green , .badge-idle for yellow, .badge-dnd for red badge on avatar.

avatar-img
avatar-img
avatar-img 

<div class="avatar-container">
<img src="" alt="avatar-img" class="avatar" />
<div class="badge badge-online">
</div></div>
            
<div class="avatar-container">
<img src="" alt="avatar-img" class="avatar" />
<div class="badge badge-idle">
</div></div>
            
<div class="avatar-container">
<img src="" alt="avatar-img" class="avatar" />
<div class="badge badge-dnd">
</div></div>
Alert
Badge