Avatar
The Avatar component can display profile pictures, initials, or a fallback icon to represent a user.
Basic
<img
class="avatar"
src="https://media.raritysniper.com/hape-prime/6435-600.webp"
alt="avatar-img"/>
Sizes
<img
class="avatar-xs"
src="https://media.raritysniper.com/hape-prime/2020-600.webp"
alt="avatar-img"/>
<img class="avatar-sm" src="https://media.raritysniper.com/hape-prime/873-600.webp" alt="avatar-img"/>
<img class="avatar-lg" src="https://media.raritysniper.com/hape-prime/1784-600.webp" alt="avatar-img"/>
<img class="avatar-xl" src="https://media.raritysniper.com/hape-prime/6237-600.webp" alt="avatar-img"/>
<img class="avatar-2xl" src="https://media.raritysniper.com/hape-prime/1141-600.webp" alt="avatar-img"/>
<img class="avatar-sm" src="https://media.raritysniper.com/hape-prime/873-600.webp" alt="avatar-img"/>
<img class="avatar-lg" src="https://media.raritysniper.com/hape-prime/1784-600.webp" alt="avatar-img"/>
<img class="avatar-xl" src="https://media.raritysniper.com/hape-prime/6237-600.webp" alt="avatar-img"/>
<img class="avatar-2xl" src="https://media.raritysniper.com/hape-prime/1141-600.webp" alt="avatar-img"/>
Avatar Badge
<div class="avatar-wrapper">
<img class="avatar" src="https://media.raritysniper.com/hape-prime/6750-600.webp" alt="avatar-img"/> <div class="online"></div>
</div>
<div class="avatar-wrapper">
<img class="avatar" src="https://media.raritysniper.com/hape-prime/906-600.webp" alt="avatar-img"/> <div class="offline"></div>
</div>
<img class="avatar" src="https://media.raritysniper.com/hape-prime/6750-600.webp" alt="avatar-img"/> <div class="online"></div>
</div>
<div class="avatar-wrapper">
<img class="avatar" src="https://media.raritysniper.com/hape-prime/906-600.webp" alt="avatar-img"/> <div class="offline"></div>
</div>