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
<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
<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
<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>