Avatar

Ajoru Only

Cool avatars with different shapes, sizes and with the possibility to group them.

Avatars

Use avatar sizing via class on avatar-* xxl, xl, lg, md, sm, xs

Design
HTML

   <!-- avatar xxl -->
   <span class="avatar avatar-xxl ">
     <img src="../assets/images/avatar/avatar-1.jpg" alt="" class="rounded-circle">
   </span>

   <!-- avatar xl -->
   <span class="avatar avatar-xl ">
     <img src="../assets/images/avatar/avatar-1.jpg" alt="" class="rounded-circle">
   </span>

   <!-- avatar lg -->
   <span class="avatar avatar-lg ">
     <img src="../assets/images/avatar/avatar-1.jpg" alt="" class="rounded-circle">
   </span>

   <!-- avatar md -->
   <span class="avatar avatar-md ">
     <img src="../assets/images/avatar/avatar-1.jpg" alt="" class="rounded-circle">
   </span>

   <!-- avatar sm -->
   <span class="avatar avatar-sm ">
     <img src="../assets/images/avatar/avatar-1.jpg" alt="" class="rounded-circle">
   </span>

   <!-- avatar xs -->
   <span class="avatar avatar-xs ">
     <img src="../assets/images/avatar/avatar-1.jpg" alt="" class="rounded-circle">
   </span>

Initials

You won't always have an image for every user, so easily use initials instead.

Design
HTML

GK GK GK GK GK GK

<!-- avatar intials xxl -->
   <span class="avatar avatar-xxl avatar-primary">
     <span class="avatar-initials rounded-circle ">GK</span>
   </span>

   <!-- avatar intials xl -->
   <span class="avatar avatar-xl avatar-primary">
     <span class="avatar-initials rounded-circle ">GK</span>
   </span>

   <!-- avatar intials lg -->
   <span class="avatar avatar-lg avatar-primary">
     <span class="avatar-initials rounded-circle ">GK</span>
   </span>

   <!-- avatar intials md -->
   <span class="avatar avatar-md avatar-primary">
     <span class="avatar-initials rounded-circle ">GK</span>
   </span>

   <!-- avatar intials sm -->
   <span class="avatar avatar-sm avatar-primary">
     <span class="avatar-initials rounded-circle ">GK</span>
   </span>

   <!-- avatar intials xs -->
   <span class="avatar avatar-xs avatar-primary">
     <span class="avatar-initials rounded-circle ">GK</span>
 </span>

Status Indicator

Use .avatar-indicators class on div.avatar element

Design
HTML

<!-- avatar status indicator xxl-->
    <span class="avatar avatar-xxl avatar-indicators avatar-online">
      <img alt="avatar" src="../assets/images/avatar/avatar-1.jpg" class="rounded-circle">
    </span>

     <!-- avatar status indicator xl-->
    <span class="avatar avatar-xl avatar-indicators avatar-away">
      <img alt="avatar" src="../assets/images/avatar/avatar-1.jpg" class="rounded-circle">
    </span>

     <!-- avatar status indicator lg-->
    <span class="avatar avatar-lg avatar-indicators avatar-offline">
      <img alt="avatar" src="../assets/images/avatar/avatar-1.jpg" class="rounded-circle">
    </span>

     <!-- avatar status indicator md-->
    <span class="avatar avatar-md avatar-indicators avatar-online">
      <img alt="avatar" src="../assets/images/avatar/avatar-1.jpg" class="rounded-circle">
    </span>

     <!-- avatar status indicator sm-->
    <span class="avatar avatar-sm avatar-indicators avatar-away">
      <img alt="avatar" src="../assets/images/avatar/avatar-1.jpg" class="rounded-circle">
    </span>

     <!-- avatar status indicator xs-->
    <span class="avatar avatar-xs avatar-indicators avatar-online">
     <img alt="avatar" src="../assets/images/avatar/avatar-1.jpg" class="rounded-circle">
  </span>

<!-- avatar varified badge -->
<div class="position-relative">
 <img src="../assets/images/avatar/avatar-1.jpg" alt="" class="rounded-circle avatar-xl" />
 <a href="#" class="position-absolute mt-2 ms-n3" data-bs-toggle="tooltip" data-placement="top" title="Verifed">
     <img src="../assets/images/svg/checked-mark.svg" alt="" height="30" width="30" />
 </a>
</div>

Groups

Use div with .avatar-group class and put span.avatar inside it.

Design
HTML

GK GK GK GK

<!-- avatar group -->
<div class="d-lg-flex">
  <div class="avatar-group me-5">
    <span class="avatar avatar-lg">
        <img alt="avatar" src="../assets/images/avatar/avatar-1.jpg" class="rounded-circle" />
    </span>
    <span class="avatar avatar-lg">
        <img alt="avatar" src="../assets/images/avatar/avatar-2.jpg" class="rounded-circle" />
    </span>
    <span class="avatar avatar-lg">
        <img alt="avatar" src="../assets/images/avatar/avatar-3.jpg" class="rounded-circle" />
    </span>
    <span class="avatar avatar-lg">
        <img alt="avatar" src="../assets/images/avatar/avatar-4.jpg" class="rounded-circle" />
    </span>
 </div>

<!-- avatar group -->
<div class="avatar-group">
   <span class="avatar avatar-lg avatar-primary">
       <span class="avatar-initials rounded-circle">GK</span>
   </span>
   <span class="avatar avatar-lg avatar-warning">
       <span class="avatar-initials rounded-circle">GK</span>
   </span>
   <span class="avatar avatar-lg avatar-success">
       <span class="avatar-initials rounded-circle">GK</span>
   </span>
   <span class="avatar avatar-lg avatar-info">
  <span class="avatar-initials rounded-circle">GK</span>
   </span>
  </div>
 </div>

Shape

Use .rounded and .rounded-circle class to make avatar rounded and circlular respectively.

Design
HTML

GK GK

<!-- avatar shape -->
<div class="d-lg-flex">
 <div class="me-4">
       <span class="avatar avatar-lg me-2">
           <img alt="avatar" src="../assets/images/avatar/avatar-1.jpg" class="rounded" />
       </span>
       <span class="avatar avatar-lg">
           <img alt="avatar" src="../assets/images/avatar/avatar-2.jpg" class="rounded-circle" />
       </span>
   </div>
   <div>
       <span class="avatar avatar-lg avatar-primary">
           <span class="avatar-initials rounded">GK</span>
       </span>
   <span class="avatar avatar-lg avatar-warning">
   <span class="avatar-initials rounded-circle">GK</span>
   </span>
  </div>
 </div>

Color

Predefined avatar color and styles for more usage. Use .avatar-* classes.

Design
HTML

GK GK GK GK GK GK GK GK

 <!-- avatar primary -->
  <span class="avatar avatar-md avatar-primary">
    <span class="avatar-initials rounded-circle">GK</span>
  </span>

  <!-- avatar secondary -->
  <span class="avatar avatar-md avatar-secondary">
    <span class="avatar-initials rounded-circle">GK</span>
  </span>

  <!-- avatar success -->
  <span class="avatar avatar-md avatar-success">
    <span class="avatar-initials rounded-circle">GK</span>
  </span>

  <!-- avatar warning -->
  <span class="avatar avatar-md avatar-warning">
    <span class="avatar-initials rounded-circle">GK</span>
  </span>

  <!-- avatar info -->
  <span class="avatar avatar-md avatar-info">
    <span class="avatar-initials rounded-circle">GK</span>
  </span>

  <!-- avatar danger -->
  <span class="avatar avatar-md avatar-danger">
    <span class="avatar-initials rounded-circle">GK</span>
  </span>

  <!-- avatar light -->
  <span class="avatar avatar-md avatar-light">
    <span class="avatar-initials rounded-circle">GK</span>
  </span>

  <!-- avatar dark -->
  <span class="avatar avatar-md avatar-dark">
    <span class="avatar-initials rounded-circle">GK</span>
  </span>

Design
HTML

GK GK GK GK GK GK GK GK

  <!-- avatar primary -->
   <span class="avatar avatar-md avatar-primary-soft">
     <span class="avatar-initials rounded-circle">GK</span>
   </span>

   <!-- avatar secondary -->
   <span class="avatar avatar-md avatar-secondary-soft">
     <span class="avatar-initials rounded-circle">GK</span>
   </span>

   <!-- avatar success -->
   <span class="avatar avatar-md avatar-success-soft">
     <span class="avatar-initials rounded-circle">GK</span>
   </span>

   <!-- avatar warning -->
   <span class="avatar avatar-md avatar-warning-soft">
     <span class="avatar-initials rounded-circle">GK</span>
   </span>

    <!-- avatar info -->
   <span class="avatar avatar-md avatar-info-soft">
     <span class="avatar-initials rounded-circle">GK</span>
   </span>

   <!-- avatar danger -->
   <span class="avatar avatar-md avatar-danger-soft">
     <span class="avatar-initials rounded-circle">GK</span>
   </span>

  <!-- avatar light soft -->
   <span class="avatar avatar-md avatar-light-soft">
     <span class="avatar-initials rounded-circle">GK</span>
   </span>

   <!-- avatar dark soft -->
   <span class="avatar avatar-md avatar-dark-soft">
 <span class="avatar-initials rounded-circle">GK</span>
</span>