Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### 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-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>