Avatar

Image or Text avatar

There are many options available to display avatars such as square, radius, rounded... And many size options for avatars.

Image Avatar

Use the .avatar-wrap to display avatar image

avatar
avatar
avatar
avatar
avatar
                                                
<div class="avatar-wrap avatar-lg">
    <img src="demos/default/assets/imgs/avatars/avatar-1.jpg" alt="avatar">
</div>                              
                                                
                                            
Avatar Size

Use the .avatar-[xs | sm | md | lg | xl | xxl] to change the avatar image size

avatar
avatar
avatar
avatar
avatar
avatar
                                                
<div class="avatar-wrap avatar-lg">
    <img src="demos/default/assets/imgs/avatars/avatar-1.jpg" alt="avatar">
</div>                              
                                                
                                            
Avatar Square | Radius

Use the .avatar-square or .avatar-radiusto change the avatar style

avatar
avatar
avatar
avatar
                                                
<div class="avatar-wrap avatar-radius avatar-lg">
    <img src="demos/default/assets/imgs/avatars/avatar-1.jpg" alt="avatar">
</div>                              
                                                
                                            
Text Avatar

You can use .avatar-text class and text to display Text avatar

KR
KR
KR
K
K
K
                                                
<div class="avatar-wrap avatar-text avatar-text-xxl avatar-text-muted">
    <span class="text">KR</span>
</div> 
                                                
                                            
Text Avatar Size and Color

You can use .avatar-text-[xs | sm | md | lg | xl | xxl] class and .avatar-text-[brand | primary | success | info | warning | danger | secondary | dark | muted] class to change size and color

KR
KR
KR
K
K
K
K
K
K
                                                
<div class="avatar-wrap avatar-text avatar-text-xxl avatar-text-muted">
    <span class="text">KR</span>
</div>