-
-
-
Notifications
-
System Reminders
Warnings on faults
-
Info Card
Important Updates
-
Rapid View
Quick information
-
Caution Panel
Immediate cautions
-
-
Bookmark
-
Message
-
Cart
-
ENEnglish (US)DeutschEspañolFrançaisPortuguês (BR)简体中文لعربية (ae)
-
Atlas GreyAdmin
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-circle" src="../assets/images/avtar/3.jpg" alt="#">
</div>
<div class="avatar">
<img class="img-90 rounded-circle" src="../assets/images/avtar/4.jpg" alt="#">
</div>
<div class="avatar">
<img class="img-80 rounded-circle" src="../assets/images/avtar/7.jpg" alt="#">
</div>
<div class="avatar">
<img class="img-70 rounded-circle" 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-circle" src="../assets/images/user/1.jpg" alt="#">
<div class="status bg-success"></div>
</div>
<div class="avatar">
<img class="img-90 rounded-circle" src="../assets/images/avtar/16.jpg" alt="#">
<div class="status bg-warning"></div>
</div>
<div class="avatar">
<img class="img-80 rounded-circle" src="../assets/images/user/3.png" alt="#">
<div class="status bg-danger"></div>
</div>
<div class="avatar">
<img class="img-70 rounded-circle" src="../assets/images/user/6.jpg" alt="#">
<div class="status bg-success"></div>
</div>
</div>Shapes
Use shapes of avatar like b-r-* (8/30/35/25)
<div class="avatars">
<div class="avatar">
<img class="img-100 b-r-8" src="../assets/images/user/14.png" alt="#">
</div>
<div class="avatar">
<img class="img-90 b-r-30" src="../assets/images/dashboard-11/user/12.jpg" alt="#">
</div>
<div class="avatar">
<img class="img-80 b-r-35" src="../assets/images/user/2.png" alt="#">
</div>
<div class="avatar">
<img class="img-70 rounded-circle" 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="b-r-8 img-100" src="../assets/images/dashboard-11/user/2.jpg" alt="#">
</div>
<div class="avatar ratio">
<img class="b-r-8 img-90" src="../assets/images/dashboard-11/user/4.jpg" alt="#">
</div>
<div class="avatar ratio">
<img class="b-r-8 img-80" src="../assets/images/dashboard-11/user/7.jpg" alt="#">
</div>
<div class="avatar ratio">
<img class="b-r-8 img-70" src="../assets/images/dashboard-11/user/9.jpg" alt="#">
</div>
<div class="avatar ratio">
<img class="b-r-8 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 b-r-* (8/30/35).
<div class="avatars">
<div class="customers d-inline-block avatar-group">
<ul>
<li class="d-inline-block">
<img class="img-100 b-r-8" src="../assets/images/dashboard-11/user/11.jpg" alt="#">
</li>
<li class="d-inline-block">
<img class="img-80 b-r-30" src="../assets/images/dashboard-11/user/8.jpg" alt="#">
</li>
<li class="d-inline-block">
<img class="img-50 b-r-35" src="../assets/images/dashboard-11/user/5.jpg" alt="#">
</li>
</ul>
</div>
<div class="customers d-inline-block avatar-group">
<ul>
<li class="d-inline-block">
<img class="img-60 rounded-circle" src="../assets/images/dashboard-11/user/8.jpg" alt="#">
</li>
<li class="d-inline-block">
<img class="b-r-8 img-80" src="../assets/images/dashboard-11/user/11.jpg" alt="#">
</li>
<li class="d-inline-block">
<img class="img-60 rounded-circle" src="../assets/images/dashboard-11/user/5.jpg" alt="#">
</li>
</ul>
</div>
<div class="customers d-inline-block avatar-group">
<ul>
<li class="d-inline-block">
<img class="img-40 rounded-circle" src="../assets/images/dashboard-11/user/8.jpg" alt="">
</li>
<li class="d-inline-block">
<img class="img-40 rounded-circle" src="../assets/images/dashboard-11/user/5.jpg" alt="">
</li>
<li class="d-inline-block">
<img class="img-40 rounded-circle" 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-circle" src="../assets/images/dashboard-9/user/1.png" alt="#">
<div class="badge badge-success position-absolute rounded-circle top-0 start-0">A</div>
</div>
<div class="avatar">
<img class="img-90 rounded-circle" src="../assets/images/dashboard-9/user/2.png" alt="#">
<div class="badge badge-warning position-absolute rounded-circle bottom-0 end-0">C</div>
</div>
<div class="avatar">
<img class="img-80 rounded-circle" src="../assets/images/dashboard-9/user/3.png" alt="#">
<div class="badge badge-danger position-absolute rounded-circle top-0 end-0">D</div>
</div>
<div class="avatar">
<img class="img-70 rounded-circle" src="../assets/images/dashboard-9/user/4.png" alt="#">
<div class="badge badge-success position-absolute rounded-circle 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-circle" src="../assets/images/user/7.jpg" alt="#">
<div class="status bg-success animation-ping"></div>
</div>
<div class="avatar">
<img class="img-90 rounded-circle" src="../assets/images/user/3.jpg" alt="#">
<div class="status bg-warning animation-ping"></div>
</div>
<div class="avatar">
<img class="img-80 rounded-circle" src="../assets/images/user/2.jpg" alt="#">
<div class="status bg-danger animation-ping"></div>
</div>
<div class="avatar">
<img class="img-70 rounded-circle" src="../assets/images/user/11.png" alt="#">
<div class="status bg-success animation-ping"></div>
</div>
</div>