Indicator

ADMIN PANEL

Indicator

You can set indicator using .indicator class.

Preview Html
Content Box
  <div class="flex flex-wrap gap-2">
   <div class="mt-2 indicator">
      <span class="offline-status"></span>
      <div class="grid p-2 bg-white text-dark w-28 h-28 place-content-center"> Content Box </div>
   </div> 
</div>

Active Indicator

Set active status indicator using .indicator class.

Preview Html
Avatar
  <div class="flex flex-wrap gap-2">
   <div class="mt-2 indicator">
      <span class="active-status"></span>
      <div class="grid bg-white rounded-full text-dark w-28 h-28 place-content-center"> Avatar </div>
   </div> 
</div>

Badge as Indicator

Set badge as indicator using indicator class.

Preview Html
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-[-15px] right-[-34px] !py-1 !px-2"> Update </span>
      <div class="grid h-20 p-2 bg-white text-dark w-28 place-content-center"> Latest Version </div>
  </div> 
</div>

Active Chat

set chat indicator using .indicator class.

Preview Html
Typing..
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.

Preview Html
+99 
  <div class="flex flex-wrap gap-2">
   <div class="mt-2 indicator">
      <span class="indicator-item badge bg-white border-2 !border-gray-300 shadow-lg text-dark rounded-full top-[-15px] right-[-20px] !py-1 !px-2"> +99 </span>
      <button class="text-white btn btn-info"> Notification </button>
   </div> 
</div>

Icon as Indicator

You can set icon as indicator using .indicator class.

Preview Html
  <div class="flex flex-wrap gap-2">
   <div class="indicator">
      <button class="flex items-center justify-center gap-1 text-white btn btn-success"> GOVO 
          +iconly('', 'Arrow-Right', 'text-[24px]', ['1','2'], 'path_formatter')
      </button>
   </div> 
</div>

Input Indicator

Set badge as indicator for input using .indicator class.

Preview Html
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-[115px] right[-34px] !py-1 !px-2"> Required </span>
      <input type="email" placeholder="Enter your id.." class="bg-white rounded-5 w-full border-none py-[11px] pl-[25px] pr-[55px] text-xs font-semibold text-dark">
   </div> 
</div>

Likes Indicator

Set likes indicator using .indicator class.

Preview Html
<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"> Add Wishlist </span>
      <i data-feather="heart" class="stroke-white sm:h-[18px] sm:w-[18px] fill-white">
   </div> 
</div>

Card Indicator

Set badge as indicator for card using .indicator class.

Preview Html
Apply!!

Ready for job?

Here, you can find more and more

  <div class="flex flex-wrap gap-2">
   <div class="mb-2 indicator">
      <span class="indicator-item badge bg-primary font-bold text-white !rounded-card bottom-[-10px] right-[-34px] !py-1 !px-2 border-none"> GOVO </span>
         <div class="bg-white card">
            <div class="card-body text-dark">
               <h3 class="text-lg font-bold"> Ready for job? </h3>
               <p class="font-normal"> Here, you can find more and more </p>
            </div>
         </div>    
   </div> 
</div>

Image Indicator

Set badge as indicator for image using .indicator class.

Preview Html
Uploading..!!
avatar
  <div class="flex flex-wrap gap-2">
   <div class="indicator">
      <span class="indicator-item img-indicator badge bg-info text-white !py-1 !px-2 border-none"> Uploading..!! </span>
      <div class="avatar rounded w-64 h-[5.5rem]">
         <img class="rounded-full" src="../../image.jpg" alt="avatar"/>
      </div>
   </div> 
</div>
Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Sidebar Type
    Choose Sidebar icon & full
Buy Now