Indicator

Indicator

Set indicator using .indicator class.

Centent Box
 <div class="flex flex-wrap gap-2">
   <div class="indicator">
      <span class="offline-status"></span>
      <div class="grid p-2 dark:bg-sidebar-dark2 sm:text-xs bg-gray-light text-title w-28 h-28 place-content-center"> Content Box </div>
   </div> 
</div>

Active Indicator

Set active status using .indicator class.

Avatar
 <div class="flex flex-wrap gap-2">
   <div class="indicator">
      <span class="active-status"></span>
      <div class="grid rounded-full dark:bg-sidebar-dark2 sm:text-xs bg-gray-light text-title w-28 h-28 place-content-center"> Avatar </div>
   </div> 
</div>

Badge as Indicator

Set badge as indicator using .indicator class.

Update
Latest
 <div class="flex flex-wrap gap-2">
   <div class="mt-2 indicator">
      <span class="indicator-item badge bg-secondary text-white rounded-full top-[-0.9375rem] right-[-2.125rem] rtl:left-[-2.125rem] rtl:right-unset !py-1 !px-2 dark:border-border-dark"> Update </span>
      <div class="grid h-[4.25rem] p-2 bg-gray-light text-title w-28 place-content-center"> Latest Version </div>
  </div> 
</div>

Active Chat

You can set chat indicator using .indicator class.

T yp i n g . .

avatar
 <div class="flex flex-wrap gap-2">
   <div class="mt-2 indicator">
      <span class="indicator-item active-process"> Typing.. </span>
      <div class="w-12 rounded">
          <img class="rounded-full" src="../../image.jpg" alt="avatar"/>
      </div>
   </div> 
</div>

Notify

Set notification indicator using .indicator class.

+99 
 <div class="flex flex-wrap gap-2">
   <div class="mt-2 indicator">
      <span class="dark:bg-sidebar-dark2 indicator-item badge bg-white border-2 border-gray-light shadow-lg text-title rounded-full top-[-0.9375rem] right-[-1.25rem] rtl:right-unset rtl:left-[-1.25rem] !py-1 !px-2 dark:border-border-dark"> +99 </span>
      <button class="text-white btn btn-info"> Notification </button>
   </div> 
</div>

Icon as Indicator

Use icon as indicator using .indicator class. 

 <div class="flex flex-wrap gap-2">
   <div class="indicator">
      <button class="flex items-center justify-center gap-1 text-white sm:text-xs btn btn-success"> GOVO 
          +SVG_ICON("Arrow-Right-2","h-5 w-5 stroke-white")
      </button>
   </div> 
</div>

Input Indicator

Add badge as indicator for input using .indicator class.

Required 
 <div class="flex flex-wrap gap-2">
   <div class="mt-2 indicator">
      <span class="indicator-item badge bg-secondary text-white rounded-full top-[10.9375rem] right[-2.125rem] rtl:left-[-2.125rem] rtl:right-unset !py-1 !px-2 dark:border-border-dark"> Required </span>
      <input type="email" placeholder="Enter your id.." class="bg-gray-light rounded-5 w-full py-[0.6875rem] pl-[1.5625rem] pr-[3.4375rem] text-xs font-semibold text-title">
   </div> 
</div>

Tab Indicator

Use badge as indicator using .indicator class. 

 <div class="flex flex-wrap gap-2">
   <div class="flex mb-1">
      <button class="tab tab-bordered tabs-bordered-bg data-tabFilter="1" tab-link"> Title </button>
      <button class="indicator mt-2 tab tab-bordered tabs-bordered-bg tab-active data-tabFilter="2" tab-link"> Description </button>
           <span class="indicator-item badge bg-primary text-white rounded-full top-[-1.25rem] right-[-1.25rem] rtl:right-unset rtl:left-[-1.25rem] !p-1 dark:border-border-dark"> +10 </span>
      <button class="tab tab-bordered tabs-bordered-bg data-tabFilter="3" tab-link"> Others </button>
  </div> 
</div>

Likes Indicator

Set likes indicator using .indicator class. 

<div class="flex flex-wrap gap-2">
   <div class="indicator">
      <span class="flex items-center justify-center gap-2 text-white rounded btn bg-secondary sm:text-xs"> Add Wishlist </span>
      <i data-feather="heart" class="stroke-white sm:h-[1.125rem] w-4 h-4 sm:w-[1.125rem] fill-white">
   </div> 
</div>

Card Indicator

Set badge as indicator for card using .indicator class.

Apply!!

Ready for job?

Here, you can find more and more

 <div class="flex flex-wrap gap-2">
   <div class="mb-2 indicator sm:mt-2 sm:mb-0">
      <span class="indicator-item badge bg-primary font-bold text-white !rounded-card bottom-[-0.625rem] right-[-2.125rem] rtl:left-[-2.125rem] rtl:right-unset sm:top-[-0.625rem] sm:right-[-0.9375rem] sm:bottom-unset !py-1 !px-2 border-none sm:text-xs"> Apply!! </span>
         <div class="card bg-gray-light">
            <div class="card-body text-title">
               <h3 class="text-lg font-bold sm:text-base"> Ready for job? </h3>
               <p class="font-normal sm:text-xs"> Here, you can find more and more </p>
            </div>
         </div>    
   </div> 
</div>

Image Indicator

Add badge as indicator for image using .indicator class.

Uploading..!!
avatar
 <div class="flex flex-wrap gap-2">
   <div class="indicator">
      <span class="indicator-item img-indicator badge bg-facebook text-white !py-1 !px-2 border-none sm:text-xs"> Uploading..!! </span>
      <div class="avatar rounded w-64 h-[5.5rem]">
         <img class="rounded-full" src="../../image.jpg" alt="avatar"/>
      </div>
   </div> 
</div>

Copyright 2023 © Govo theme by pixelstrap

Hand crafted & made with

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