Govo - Premium Admin Template

Sizes

Use the.w-[size] class to add custom size for avatar.

<div class="flex flex-wrap items-center gap-[0.5rem] 2xl:gap-[0.375rem]">
   <div class="avatar">
    <div class="rounded w-28">
      <img src="../../assets/images/avatar/20.jpg" alt="avatar"/>
     </div>
   </div>
   <div class="avatar">
     <div class="w-24 rounded">
       <img src="../../assets/images/avatar/20.jpg" alt="avatar"/>
     </div>
   </div>
   <div class="avatar">
     <div class="w-20 rounded">
      <img src="../../assets/images/avatar/20.jpg" alt="avatar"/>
     </div>
   </div>
   <div class="avatar">
     <div class="w-16 rounded">
       <img src="../../assets/images/avatar/20.jpg" alt="avatar"/>
     </div>
   </div>
</div>

Shapes

Use the .rounded-* utility class to create avatar shapes.

<div class="flex flex-wrap items-center gap-[0.5rem] 2xl:gap-[0.375rem]">
   <div class="rounded-none avatar">
    <div class="w-28 ">
      <img src="../../assets/images/avatar/27.jpg" alt="avatar"/>
     </div>
   </div>
   <div class="avatar rounded-xl">
     <div class="w-24">
      <img src="../../assets/images/avatar/27.jpg" alt="avatar"/>
     </div>
   </div>
   <div class="avatar rounded-3xl">
     <div class="w-20">
       <img src="../../assets/images/avatar/27.jpg" alt="avatar"/>
     </div>
   </div> 
   <div class="rounded-full avatar">
     <div class="w-16">
       <img src="../../assets/images/avatar/27.jpg" alt="avatar"/>
     </div>
   </div>
</div>

Status

Use the .status-* class to indicate the status of avatar.

<div class="flex flex-wrap items-center gap-[0.5rem] 2xl:gap-[0.375rem]">
   <div class="avatar">
    <div class="relative overflow-visible rounded w-28">
      <img src="../../assets/images/avatar/21.jpg" alt="avatar"/>
      <div class="status-offline"></div>
     </div>
   </div>
   <div class="avatar">
     <div class="relative w-24 overflow-visible rounded">
       <img src="../../assets/images/avatar/21.jpg" alt="avatar"/>
      <div class="status-online"></div>
     </div>
   </div>
   <div class="avatar">
     <div class="relative w-20 overflow-visible rounded">
      <img src="../../assets/images/avatar/21.jpg" alt="avatar"/>
      <div class="status-online"></div>
     </div>
   </div>
   <div class="avatar">
     <div class="relative w-16 overflow-visible rounded">
       <img src="../../assets/images/avatar/21.jpg" alt="avatar"/>
      <div class="status-dnd"></div>
     </div>
   </div>
</div>

Groups

Use the .avatar-group class to create the group of avatars with the size.

<div class="flex flex-wrap items-center gap-[0.5rem] 2xl:gap-[0.375rem]">
   <div class="items-center justify-center avatar-group">
    <div class="border-white avatar rounded-xl hover:translate-y-[-5px] hover:transition-all hover:ease translate-y-0 dark:border-border-dark">
     <div class="w-24">
       <img src="../../assets/images/avatar/20.jpg" alt="avatar"/>
      </div>
    </div>
     <div class="border-white avatar rounded-xl hover:translate-y-[-5px] hover:transition-all hover:ease translate-y-0 dark:border-border-dark">
     <div class="w-20">
       <img src="../../assets/images/avatar/20.jpg" alt="avatar"/>
      </div>
    </div>
     <div class="border-white avatar rounded-xl hover:translate-y-[-5px] hover:transition-all hover:ease translate-y-0 dark:border-border-dark">
     <div class="w-16">
        <span class="text-xs font-bold text-title"/> 26+
      </div>
    </div>
    <div class="items-center justify-center avatar-group">
    <div class="border-white avatar hover:translate-y-[-5px] hover:transition-all hover:ease translate-y-0 dark:border-border-dark">
     <div class="w-20">
       <img src="../../assets/images/avatar/20.jpg" alt="avatar"/>
      </div>
    </div>
     <div class="border-white avatar hover:translate-y-[-5px] hover:transition-all hover:ease translate-y-0 dark:border-border-dark">
     <div class="w-16">
       <img src="../../assets/images/avatar/20.jpg" alt="avatar"/>
      </div>
    </div>
     <div class="border-white avatar hover:translate-y-[-5px] hover:transition-all hover:ease translate-y-0 dark:border-border-dark">
     <div class="w-12">
        <span class="text-xs font-bold text-title"/> 26+
      </div>
    </div>
    <div class="items-center justify-center avatar-group">
    <div class="border-white avatar hover:translate-y-[-5px] hover:transition-all hover:ease translate-y-0 dark:border-border-dark">
     <div class="w-12">
       <img src="../../assets/images/avatar/20.jpg" alt="avatar"/>
      </div>
    </div>
    <div class="border-white avatar hover:translate-y-[-5px] hover:transition-all hover:ease translate-y-0 dark:border-border-dark">
     <div class="w-12">
       <img src="../../assets/images/avatar/20.jpg" alt="avatar"/>
      </div> 
    </div>
    <div class="border-white avatar hover:translate-y-[-5px] hover:transition-all hover:ease translate-y-0 dark:border-border-dark">
     <div class="w-12">
       <span class="text-xs font-bold text-title"/> 26+
     </div>
    </div>
   </div>
</div>

Groups with Counter

Use the .avatar-group class to create the group of avatars with the counter.

<div class="flex flex-wrap items-center gap-[0.5rem] 2xl:gap-[0.375rem]">
   <div class="items-center justify-center avatar-group">
    <div class="border-white hover:translate-y-[-5px] dark:border-border-dark hover:transition-all hover:ease translate-y-0 rounded-none avatar">
     <div class="w-24">
       <img src="../../image.jpg" alt="avatar"/>
      </div>
    </div>
     <div class="border-white hover:translate-y-[-5px] dark:border-border-dark hover:transition-all hover:ease translate-y-0 avatar rounded-3xl">
     <div class="w-20">
       <img src="../../image.jpg" alt="avatar"/>
      </div>
    </div>
     <div class="border-white hover:translate-y-[-5px] dark:border-border-dark hover:transition-all hover:ease translate-y-0 avatar dark:bg-sidebar-dark">
     <div class="w-16">
        <span class="text-xs font-bold text-title"/> 26+
      </div>
    </div> 
    <div class="items-center justify-center avatar-group">
    <div class="border-white hover:translate-y-[-5px] dark:border-border-dark hover:transition-all hover:ease translate-y-0 avatar">
     <div class="w-20">
       <img src="../../image.jpg" alt="avatar"/>
      </div>
    </div>
     <div class="border-white hover:translate-y-[-5px] dark:border-border-dark hover:transition-all hover:ease translate-y-0 avatar">
     <div class="w-16">
       <img src="../../image.jpg" alt="avatar"/>
      </div>
    </div>
     <div class="border-white hover:translate-y-[-5px] dark:border-border-dark hover:transition-all hover:ease translate-y-0 avatar dark:bg-sidebar-dark">
     <div class="w-12">
        <span class="text-xs font-bold text-title"/> 26+
      </div>
    </div>
    <div class="items-center justify-center avatar-group">
    <div class="border-white hover:translate-y-[-5px] dark:border-border-dark hover:transition-all hover:ease translate-y-0 avatar">
     <div class="w-12">
       <img src="../../image.jpg" alt="avatar"/>
      </div>
    </div>
    <div class="border-white hover:translate-y-[-5px] dark:border-border-dark hover:transition-all hover:ease translate-y-0 avatar">
     <div class="w-12">
       <img src="../../image.jpg" alt="avatar"/>
      </div>
    </div>
    <div class="border-white hover:translate-y-[-5px] dark:border-border-dark hover:transition-all hover:ease translate-y-0 avatar dark:bg-sidebar-dark">
     <div class="w-12"> 
       <span class="text-xs font-bold text-title"/> 26+
      </div>
    </div>
   </div>
</div>

Ping

Use the .animate-ping utility class to indicate important message.

<div class="flex flex-wrap items-center gap-[0.5rem] 2xl:gap-[0.375rem]">
   <div class="avatar">
     <div class="relative overflow-visible rounded w-14">
       <img src="../../assets/images/avatar/20.jpg" alt="avatar"/>
      <div class="status-online animate-ping"></div>
     </div>
   </div>
   <div class="avatar">
     <div class="relative w-12 overflow-visible rounded">
      <img src="../../assets/images/avatar/20.jpg" alt="avatar"/>
      <div class="status-online animate-ping"></div>
     </div>
   </div>
   <div class="avatar">
     <div class="relative overflow-visible rounded w-11">
       <img src="../../assets/images/avatar/20.jpg" alt="avatar"/>
      <div class="status-dnd animate-ping"></div>
     </div>
   </div> 
   <div class="avatar">
     <div class="relative w-10 overflow-visible rounded">
       <img src="../../assets/images/avatar/20.jpg" alt="avatar"/>
      <div class="status-offline"></div>
     </div>
   </div>
   <div class="avatar">
    <div class="relative overflow-visible rounded w-9">
      <img src="../../assets/images/avatar/20.jpg" alt="avatar"/>
      <div class="status-offline animate-ping"></div>
     </div>
   </div>
</div>

Initial

Use initial letter as a avatar.

 <div class="flex flex-wrap items-center gap-[0.5rem] 2xl:gap-[0.375rem]">
   <div class="inline-flex avatar">
    <div class="flex items-center justify-center rounded w-14 bg-gray-light dark:bg-sidebar-dark2">
      <span class="text-3xl"> G </span>
     </div>
   </div> 
   <div class="inline-flex avatar">
     <div class="flex items-center justify-center w-12 rounded bg-gray-light dark:bg-sidebar-dark2">
       <span class="text-2xl"> O </span>
     </div> 
   </div>
   <div class="inline-flex avatar">
     <div class="flex items-center justify-center rounded w-11 bg-gray-light dark:bg-sidebar-dark2">
      <span class="text-xl"> V </span>
     </div>
   </div>
   <div class="inline-flex avatar">
     <div class="flex items-center justify-center w-10 rounded bg-gray-light dark:bg-sidebar-dark2">
       <span class="text-lg"> O </span>
     </div>
   </div> 
</div>

Icons

Use icon to make icon avatars.

<div class="flex flex-wrap items-center gap-[0.5rem] 2xl:gap-[0.375rem]">
   <div class="avatar">
    <div>
      +SVG_ICON("Heart","w-[3.125rem] h-[3.125rem] 2sm:w-[2.25rem] 2sm:h-[2.25rem] 
      stroke-white bg-primary p-[10px]")
     </div>
   </div>
   <div class="avatar">
     <div>
     +SVG_ICON("Heart","w-[3.125rem] h-[3.125rem] 2sm:w-[2.25rem] 2sm:h-[2.25rem] 
      stroke-white bg-success p-[10px]")
     </div>
   </div>
   <div class="avatar">
     <div>
     +SVG_ICON("Heart","w-[3.125rem] h-[3.125rem] 2sm:w-[2.25rem] 2sm:h-[2.25rem] 
      stroke-white bg-info p-[10px]")
     </div>
   </div>
   <div class="avatar">
     <div>
     +SVG_ICON("Heart","w-[3.125rem] h-[3.125rem] 2sm:w-[2.25rem] 2sm:h-[2.25rem] 
      stroke-white bg-danger p-[10px]")
     </div>
   </div> 
   <div class="avatar">
     <div>
     +SVG_ICON("Heart","w-[3.125rem] h-[3.125rem] 2sm:w-[2.25rem] 2sm:h-[2.25rem] 
      stroke-white bg-warning p-[10px]")
     </div>
   </div> 
</div>

Hand crafted & made with

Customizer

Template Mode
Choose template mode dark & light
Layout Type
Choose layout Ltr & Rtl
Monochrome Mode

Avatars

Unique Dashboard

Ecommerce Dashboard

Sizes

Shapes

Status

Groups

Groups with Counter

Ping

Initial

Icons

Template Mode

Layout Type

Notification

Dmitriy Groshev

Sufiya Elija

Janis Evans

Mukrani Pabelo

Josephin Water

Janis Evans

Sufiya Elija

Messages

New Review Receive

Transaction $250 Success

Order Place Success

Netflix Subscription Expires

Congratulations You Won $2500

Latest Updates On You Phone

Cart Items(25)

Flower Pot

Iphone Max pro

Royal Party Glass

Water Proof Watch

Traveling Duffle Bag

Bag Total

Helen Walter

Unique Dashboard

Ecommerce Dashboard

Sizes

Shapes

Status

Groups

Groups with Counter

Ping

Initial

Icons

Template Mode

Layout Type