Admiro - Premium Admin Template

ENG
2
Cart
- Watch multicolor
  
  $500
- Airpods
  
  $500.00
- Order Total : $1000.00
- Go to your cart Checkout
4
Notification View all
- 30-04-2024Today
  
  Alice Goodwin
  
  Fashion should be fun. It shouldn't be labelled intellectual.
- 28-06-20241 hour ago
  
  Herry Venter
  
  I am convinced that there can be luxury in simplicity.
- 04-08-2024Today
  
  Loain Deo
  
  I feel that things happen for open new opportunities.
- 12-11-2024Yesterday
  
  Fenter Jessy
  
  Sometimes the simplest things are the most profound.
Bookmark
- Dashboard
- To-do
- Chart
15
Ava Davis

Admin
- Account
- Inbox
- Task
- Log Out

Avatars

Sizes

Set the size of avatars using .img-*(70/80/90/100) class.

<div class="avatars">
<div class="avatar"><img class="img-100 rounded-circle" src="../assets/images/avtar/3.jpg" alt="avatar"></div>
<div class="avatar"><img class="img-90 rounded-circle" src="../assets/images/avtar/4.jpg" alt="avatar"></div>
<div class="avatar"><img class="img-80 rounded-circle" src="../assets/images/avtar/7.jpg" alt="avatar"></div>
<div class="avatar"><img class="img-70 rounded-circle" src="../assets/images/avtar/11.jpg" alt="avatar"></div>
</div>

Status Indicator

Add .status-*(online/offline/dnd) class to set the status.

<div class="avatars">
<div class="avatar"><img class="img-100 rounded-circle" src="../assets/images/user/1.jpg" alt="avatar">
<div class="status status-online"></div>
</div>
<div class="avatar"><img class="img-90 rounded-circle" src="../assets/images/avtar/16.jpg" alt="avatar">
<div class="status status-dnd"></div>
</div>
<div class="avatar"><img class="img-80 rounded-circle" src="../assets/images/avtar/7.jpg" alt="avatar">
<div class="status status-offline"></div>
</div>
<div class="avatar"><img class="img-70 rounded-circle" src="../assets/images/avtar/11.jpg" alt="avatar">
<div class="status status-online"></div>
</div>
</div>

Shapes

Use .b-r-*(8/30/35/25) class shapes of avatar.

<div class="avatars">
<div class="avatar"><img class="img-100 b-r-8" src="../assets/images/avtar/4.jpg" alt="avatar"></div>
<div class="avatar"><img class="img-90 b-r-30" src="../assets/images/avtar/16.jpg" alt="avatar"></div>
<div class="avatar"><img class="img-80 b-r-35" src="../assets/images/avtar/3.jpg" alt="avatar"></div>
<div class="avatar"><img class="img-70 rounded-circle" src="../assets/images/avtar/11.jpg" alt="avatar"></div>
</div>

Ratio

Give the 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/avtar/11.jpg" alt="avatar"></div>
<div class="avatar ratio"><img class="b-r-8 img-90" src="../assets/images/avtar/4.jpg" alt="avatar"></div>
<div class="avatar ratio"><img class="b-r-8 img-80" src="../assets/images/user/1.jpg" alt="avatar"></div>
<div class="avatar ratio"><img class="b-r-8 img-70" src="../assets/images/avtar/16.jpg" alt="avatar"></div>
<div class="avatar ratio"><img class="b-r-8 img-50" src="../assets/images/avtar/7.jpg" alt="avatar"></div>
</div>

Grouping

Use set the group of avatars using .img-*(40/50/60/80/100) & .b-r-*(8/30/35) class.

<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/avtar/4.jpg" alt="avatar"></li>
<li class="d-inline-block"><img class="img-80" src="../assets/images/avtar/16.jpg" alt="avatar"></li>
<li class="d-inline-block"></li><img class="img-50 b-r-35" src="../assets/images/avtar/3.jpg" alt="avatar">
</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/avtar/16.jpg" alt="avatar"></li>
<li class="d-inline-block"><img class="b-r-8 img-80" src="../assets/images/user/1.jpg" alt="avatar"></li>
<li class="d-inline-block"><img class="img-60 rounded-circle" src="../assets/images/avtar/16.jpg" alt="avatar"></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/user/3.jpg" alt="avatar"></li>
<li class="d-inline-block"><img class="img-40 rounded-circle" src="../assets/images/user/5.jpg" alt="avatar"></li>
<li class="d-inline-block"><img class="img-40 rounded-circle" src="../assets/images/user/1.jpg" alt="avatar"></li>
<ul>
</div>

Avatar Initial

Use initial letter to set avatars.

<div class="avatars">
<div class="avatar-intial img-80 bg-light-primary"><span class="fs-1">A</span></div>
<div class="avatar-intial img-70 bg-light-secondary"><span class="fs-2">D</span></div>
<div class="avatar-intial img-60 bg-light-danger"><span class="fs-3">M</span></div>
<div class="avatar-intial img-50 bg-light-primary"><span class="fs-4">I</span></div>
<div class="avatar-intial img-40 bg-light-secondary"><span class="fs-5">R</span></div>
<div class="avatar-intial img-30 bg-light-danger"><span class="fs-6">O</span></div>

Avatar Ping

To set ping animation use .ping class.

<div class="avatars">
<div class="avatar"><img class="img-80 rounded-circle" src="../assets/images/avtar/11.jpg" alt="avatar">
<div class="ping status-offline status"> </div>
</div>
<div class="avatar"> <img class="img-70 rounded-circle" src="../assets/images/avtar/4.jpg" alt="avatar">
<div class="ping status-online status"></div>
</div>
<div class="avatar"><img class="img-60 rounded-circle" src="../assets/images/user/1.jpg" alt="avatar">
<div class="ping status-dnd status"> </div>
</div>
<div class="avatar"><img class="img-50 rounded-circle" src="../assets/images/avtar/3.jpg" alt="avatar">
<div class="ping status-offline status"></div>

Avatar profile

Use icon and images as avatars profile.

<!-- You can use status-* Use icon and images as avatars profile. -->
<div class="avatars">
<div class="user-img"><img src="../assets/images/profile.png" alt="user">
<div class="setting-icon"> <i class="iconly-Setting icli"> </i></div>
</div>
<div class="avatar-intial img-60 bg-light-primary avatar-profile"><img src="../assets/images/users/6.png" alt="users"></div>
</div>
</div>

$500

$500.00

30-04-2024Today

Alice Goodwin

28-06-20241 hour ago

Herry Venter

04-08-2024Today

Loain Deo

12-11-2024Yesterday

Fenter Jessy