Don't Miss Out! Our new update has been released.
Avatars
Sizes
Use size of avatar like img-* (70/80/90/100) class.
<div class="card-body avatar-showcase">
<div class="avatars">
<div class="avatar">
<img class="img-100 rounded-full" src="../assets/images/avtar/3.jpg" alt="#">
</div>
<div class="avatar">
<img class="img-90 rounded-full" src="../assets/images/avtar/4.jpg" alt="#">
</div>
<div class="avatar">
<img class="img-80 rounded-full" src="../assets/images/avtar/7.jpg" alt="#">
</div>
<div class="avatar">
<img class="img-70 rounded-full" src="../assets/images/avtar/11.jpg" alt="#">
</div>
</div>
</div>Status Indicator
Use status of avatar like status-* (online/offline/dnd)
<div class="avatars">
<div class="avatar">
<img class="img-100 rounded-full" src="../assets/images/user/1.jpg" alt="#">
<div class="status bg-success"></div>
</div>
<div class="avatar">
<img class="img-90 rounded-full" src="../assets/images/avtar/16.jpg" alt="#">
<div class="status bg-warning"></div>
</div>
<div class="avatar">
<img class="img-80 rounded-full" src="../assets/images/user/3.png" alt="#">
<div class="status bg-danger"></div>
</div>
<div class="avatar">
<img class="img-70 rounded-full" src="../assets/images/user/6.jpg" alt="#">
<div class="status bg-success"></div>
</div>
</div>Shapes
Use shapes of avatar like rounded-r-* (8/30/35/25)
<div class="avatars">
<div class="avatar">
<img class="img-100 rounded-[8px]" src="../assets/images/user/14.png" alt="#">
</div>
<div class="avatar">
<img class="img-90 rounded-[30px]" src="../assets/images/dashboard-11/user/12.jpg" alt="#">
</div>
<div class="avatar">
<img class="img-80 rounded-[35px]" src="../assets/images/user/2.png" alt="#">
</div>
<div class="avatar">
<img class="img-70 rounded-full" src="../assets/images/user/12.png" alt="#">
</div>
</div>Ratios
Use shape to avatar using ratio and img-* (50/70/80/90/100) class.
<div class="avatars">
<div class="avatar ratio">
<img class="rounded-[8px] img-100" src="../assets/images/dashboard-11/user/2.jpg" alt="#">
</div>
<div class="avatar ratio">
<img class="rounded-[8px] img-90" src="../assets/images/dashboard-11/user/4.jpg" alt="#">
</div>
<div class="avatar ratio">
<img class="rounded-[8px] img-80" src="../assets/images/dashboard-11/user/7.jpg" alt="#">
</div>
<div class="avatar ratio">
<img class="rounded-[8px] img-70" src="../assets/images/dashboard-11/user/9.jpg" alt="#">
</div>
<div class="avatar ratio">
<img class="rounded-[8px] img-50" src="../assets/images/dashboard-11/user/10.jpg" alt="#">
</div>
</div>Grouping
Use group of avatars like img-* (40/50/60/80/100) and rounded-* (8/30/35).
<div class="avatars">
<div class="customers inline-block avatar-group">
<ul>
<li class="inline-block">
<img class="img-100 rounded-[8px]" src="../assets/images/dashboard-11/user/11.jpg" alt="#">
</li>
<li class="inline-block">
<img class="img-80 rounded-[30px]" src="../assets/images/dashboard-11/user/8.jpg" alt="#">
</li>
<li class="inline-block">
<img class="img-50 rounded-[35px]" src="../assets/images/dashboard-11/user/5.jpg" alt="#">
</li>
</ul>
</div>
<div class="customers inline-block avatar-group">
<ul>
<li class="inline-block">
<img class="img-60 rounded-full" src="../assets/images/dashboard-11/user/8.jpg" alt="#">
</li>
<li class="inline-block">
<img class="rounded-[8px] img-80" src="../assets/images/dashboard-11/user/11.jpg" alt="#">
</li>
<li class="inline-block">
<img class="img-60 rounded-full" src="../assets/images/dashboard-11/user/5.jpg" alt="#">
</li>
</ul>
</div>
<div class="customers inline-block avatar-group">
<ul>
<li class="inline-block">
<img class="img-40 rounded-full" src="../assets/images/dashboard-11/user/8.jpg" alt="">
</li>
<li class="inline-block">
<img class="img-40 rounded-full" src="../assets/images/dashboard-11/user/5.jpg" alt="">
</li>
<li class="inline-block">
<img class="img-40 rounded-full" src="../assets/images/dashboard-11/user/11.jpg" alt="">
</li>
</ul>
</div>
</div>Badge-Indicator
Use badge class with avatar to indicate and provide indication.
A
C
D
B
<div class="avatars badge-avatar">
<div class="avatar">
<img class="img-100 rounded-full" src="../assets/images/dashboard-9/user/1.png" alt="#">
<div class="badge badge-success absolute rounded-full top-0 start-0">A</div>
</div>
<div class="avatar">
<img class="img-90 rounded-full" src="../assets/images/dashboard-9/user/2.png" alt="#">
<div class="badge badge-warning absolute rounded-full bottom-0 end-0">C</div>
</div>
<div class="avatar">
<img class="img-80 rounded-full" src="../assets/images/dashboard-9/user/3.png" alt="#">
<div class="badge badge-danger absolute rounded-full top-0 end-0">D</div>
</div>
<div class="avatar">
<img class="img-70 rounded-full" src="../assets/images/dashboard-9/user/4.png" alt="#">
<div class="badge badge-success absolute rounded-full bottom-0 start-0">B</div>
</div>
</div>Initial Letter Avatar
Use initial letter as a avatar.
P
I
X
E
L
<div class="letter-avatar">
<h6 class="txt-primary bg-light-primary">P </h6>
<h6 class="txt-secondary bg-light-secondary">I</h6>
<h6 class="txt-success bg-light-success">X</h6>
<h6 class="txt-danger bg-light-danger">E </h6>
<h6 class="txt-info bg-light-info">L</h6>
</div>Animated Avatar
Use animation-ping class with avatar to indicate active/offline/dnd status.
<div class="avatars">
<div class="avatar">
<img class="img-100 rounded-full" src="../assets/images/user/7.jpg" alt="#">
<div class="status bg-success animation-ping"></div>
</div>
<div class="avatar">
<img class="img-90 rounded-full" src="../assets/images/user/3.jpg" alt="#">
<div class="status bg-warning animation-ping"></div>
</div>
<div class="avatar">
<img class="img-80 rounded-full" src="../assets/images/user/2.jpg" alt="#">
<div class="status bg-danger animation-ping"></div>
</div>
<div class="avatar">
<img class="img-70 rounded-full" src="../assets/images/user/11.png" alt="#">
<div class="status bg-success animation-ping"></div>
</div>
</div>