@extends('layouts.simple.master') @section('title', 'Avatars') @section('css') @endsection @section('main_content')

Avatars

  2. Ui Kits
  3. 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="{{ asset('assets/images/avtar/3.jpg') }}" alt="#">
   </div>
   <div class="avatar">
     <img class="img-90 rounded-circle" src="{{ asset('assets/images/avtar/4.jpg') }}" alt="#">
   </div>
   <div class="avatar">
     <img class="img-80 rounded-circle" src="{{ asset('assets/images/avtar/7.jpg') }}" alt="#">
   </div>
   <div class="avatar">
     <img class="img-70 rounded-circle" src="{{ asset('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="{{ asset('assets/images/user/1.jpg') }}" alt="#">
   <div class="status bg-success"></div>
 </div>
 <div class="avatar">
   <img class="img-90 rounded-circle" src="{{ asset('assets/images/avtar/16.jpg') }}" alt="#">
   <div class="status bg-warning"></div>
 </div>
 <div class="avatar">
   <img class="img-80 rounded-circle" src="{{ asset('assets/images/user/3.png') }}" alt="#">
   <div class="status bg-danger"></div>
 </div>
 <div class="avatar">
   <img class="img-70 rounded-circle" src="{{ asset('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="{{ asset('assets/images/user/14.png') }}" alt="#">
 </div>
 <div class="avatar">
   <img class="img-90 b-r-30" src="{{ asset('assets/images/dashboard-11/user/12.jpg') }}" alt="#">
 </div>
 <div class="avatar">
   <img class="img-80 b-r-35" src="{{ asset('assets/images/user/2.png') }}" alt="#">
 </div>
 <div class="avatar">
   <img class="img-70 rounded-circle" src="{{ asset('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="{{ asset('assets/images/dashboard-11/user/2.jpg') }}" alt="#">
 </div>
 <div class="avatar ratio">
   <img class="b-r-8 img-90" src="{{ asset('assets/images/dashboard-11/user/4.jpg') }}" alt="#">
 </div>
 <div class="avatar ratio">
   <img class="b-r-8 img-80" src="{{ asset('assets/images/dashboard-11/user/7.jpg') }}" alt="#">
 </div>
 <div class="avatar ratio">
   <img class="b-r-8 img-70" src="{{ asset('assets/images/dashboard-11/user/9.jpg') }}" alt="#">
 </div>
 <div class="avatar ratio">
   <img class="b-r-8 img-50" src="{{ asset('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="{{ asset('assets/images/dashboard-11/user/11.jpg') }}" alt="#">
     </li>
     <li class="d-inline-block">
       <img class="img-80 b-r-30" src="{{ asset('assets/images/dashboard-11/user/8.jpg') }}" alt="#">
     </li>
     <li class="d-inline-block">
       <img class="img-50 b-r-35" src="{{ asset('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="{{ asset('assets/images/dashboard-11/user/8.jpg') }}" alt="#">
     </li>
     <li class="d-inline-block">
       <img class="b-r-8 img-80" src="{{ asset('assets/images/dashboard-11/user/11.jpg') }}" alt="#">
     </li>
     <li class="d-inline-block">
       <img class="img-60 rounded-circle" src="{{ asset('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="{{ asset('assets/images/dashboard-11/user/8.jpg') }}" alt="">
     </li>
     <li class="d-inline-block">
       <img class="img-40 rounded-circle" src="{{ asset('assets/images/dashboard-11/user/5.jpg') }}" alt="">
     </li>
     <li class="d-inline-block">
       <img class="img-40 rounded-circle" src="{{ asset('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="{{ asset('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="{{ asset('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="{{ asset('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="{{ asset('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="{{ asset('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="{{ asset('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="{{ asset('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="{{ asset('assets/images/user/11.png') }}" alt="#">
   <div class="status bg-success animation-ping"></div>
 </div>
</div>
@endsection @section('scripts') @endsection