Avatar
Use avater of different shapes and sizes with a single component.
Circular
<div class="avatar avatar-4xl">
<img class="rounded-circle" src="../assets/img/team/1.jpg" alt="" />
</div>Square
<div class="avatar avatar-4xl">
<img src="../assets/img/team/2.jpg" alt="">
</div>Soft
<div class="avatar avatar-4xl">
<img class="rounded-soft" src="../assets/img/team/3.jpg" alt="" />
</div>Content
12+
<div class="avatar avatar-4xl">
<div class="avatar-name rounded-circle "><span>12+</span></div>
</div>Name
EW
<div class="avatar avatar-4xl">
<div class="avatar-name rounded-circle"><span>EW</span></div>
</div>Emoji
🎁
<div class="avatar avatar-4xl">
<div class="avatar-emoji rounded-circle "><span role="img" aria-label="Emoji">🎁</span></div>
</div>Status
<div class="row align-items-center">
<div class="col-auto">
<div class="avatar avatar-4xl status-online">
<img class="rounded-circle" src="../assets/img/team/1.jpg" alt="" />
</div>
</div>
<div class="col-auto">
<div class="avatar avatar-4xl status-offline">
<img class="rounded-circle" src="../assets/img/team/1.jpg" alt="" />
</div>
</div>
<div class="col-auto">
<div class="avatar avatar-4xl status-away">
<img class="rounded-circle" src="../assets/img/team/1.jpg" alt="" />
</div>
</div>
<div class="col-auto">
<div class="avatar avatar-4xl status-do-not-disturb">
<img class="rounded-circle" src="../assets/img/team/1.jpg" alt="" />
</div>
</div>
</div>Sizes
<div class="row align-items-center mt-4">
<div class="col-auto">
<div class="avatar avatar-5xl">
<img class="rounded-circle" src="../assets/img/team/1.jpg" alt="" />
</div>
</div>
<div class="col-auto">
<div class="avatar avatar-4xl">
<img class="rounded-circle" src="../assets/img/team/1.jpg" alt="" />
</div>
</div>
<div class="col-auto">
<div class="avatar avatar-3xl">
<img class="rounded-circle" src="../assets/img/team/1.jpg" alt="" />
</div>
</div>
<div class="col-auto">
<div class="avatar avatar-2xl">
<img class="rounded-circle" src="../assets/img/team/1.jpg" alt="" />
</div>
</div>
<div class="col-auto">
<div class="avatar avatar-xl">
<img class="rounded-circle" src="../assets/img/team/1.jpg" alt="" />
</div>
</div>
<div class="col-auto">
<div class="avatar avatar-l">
<img class="rounded-circle" src="../assets/img/team/1.jpg" alt="" />
</div>
</div>
<div class="col-auto">
<div class="avatar avatar-m">
<img class="rounded-circle" src="../assets/img/team/1.jpg" alt="" />
</div>
</div>
<div class="col-auto">
<div class="avatar avatar-s">
<img class="rounded-circle" src="../assets/img/team/1.jpg" alt="" />
</div>
</div>
</div>
