Falcon LLP
ENG
ARB
GER
Notifications
Project Deadline
Project ‘ERP Upgrade’ is due in 3 days.
30 min
AD
New Order Placed
Order #SO-2345 has been placed by Adrian.
25 min
30 min
Low Stock Alert
Stock for Product A has dropped below the minimum threshold (15 units left).
30 min
SJ
Expense Added
New expense entry ‘Office Supplies’ worth $250 has been recorded.
2 hrs ago
Project Deadline
Project ‘ERP Upgrade’ is due in 3 days.
30 min
AD
New Order Placed
Order #SO-2345 has been placed by Adrian.
25 min
Search
I’m Looking For
Quick Actions
Search
Avatar
Circular Avatars
<div class="flex flex-wrap items-end justify-start lg:justify-between! gap-3 border-dashed border-primary border px-4.5 py-5 rounded-md">
<img class="w-3 h-3 border border-border-color rounded-full" src="assets/img/avatar/avatar-01.jpg" alt="avatar">
<img class="w-4 h-4 border border-border-color rounded-full" src="assets/img/avatar/avatar-02.jpg" alt="avatar">
<img class="w-5 h-5 border border-border-color rounded-full" src="assets/img/avatar/avatar-03.jpg" alt="avatar">
<img class="w-6 h-6 border border-border-color rounded-full" src="assets/img/avatar/avatar-04.jpg" alt="avatar">
<img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-05.jpg" alt="avatar">
<img class="w-10 h-10 border border-border-color rounded-full" src="assets/img/avatar/avatar-06.jpg" alt="avatar">
</div>
Square Avatars
<div class="flex flex-wrap items-end justify-start lg:justify-between! gap-3 border-dashed border-primary border px-4.5 py-5 rounded-md">
<img class="w-3 h-3 border border-border-color rounded-xs" src="assets/img/avatar/avatar-14.jpg" alt="avatar">
<img class="w-4 h-4 border border-border-color rounded-xs" src="assets/img/avatar/avatar-15.jpg" alt="avatar">
<img class="w-5 h-5 border border-border-color rounded-sm" src="assets/img/avatar/avatar-16.jpg" alt="avatar">
<img class="w-6 h-6 border border-border-color rounded-md" src="assets/img/avatar/avatar-17.jpg" alt="avatar">
<img class="w-8 h-8 border border-border-color rounded-lg" src="assets/img/avatar/avatar-18.jpg" alt="avatar">
<img class="w-10 h-10 border border-border-color rounded-lg" src="assets/img/avatar/avatar-19.jpg" alt="avatar">
</div>
Circular Avatars with Placeholder
AI
AI
AI
AI
AI
AI
AI
AI
AI
AI
AI
AI
<div class="border-dashed border-primary border px-4.5 py-5 rounded-md">
<div class="flex flex-wrap items-end lg:justify-between justify-start gap-3 lg:mb-12 mb-5">
<span class="w-4 h-4 bg-primary rounded-full text-xs text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-5 h-5 bg-primary rounded-full text-xs text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-6 h-6 bg-primary rounded-full text-xs text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-8 h-8 bg-primary rounded-full text-[13px] text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-10 h-10 bg-primary rounded-full text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-11 h-11 bg-primary rounded-full text-white flex justify-center items-center font-semibold">AI</span>
</div>
<div class="flex flex-wrap items-end lg:justify-between justify-start gap-3">
<span class="w-4 h-4 bg-light border border-border-color rounded-full text-xs text-dark flex justify-center items-center font-semibold">AI</span>
<span class="w-5 h-5 bg-light border border-border-color rounded-full text-xs text-dark flex justify-center items-center font-semibold">AI</span>
<span class="w-6 h-6 bg-light border border-border-color rounded-full text-xs text-dark flex justify-center items-center font-semibold">AI</span>
<span class="w-8 h-8 bg-light border border-border-color rounded-full text-[13px] text-dark flex justify-center items-center font-semibold">AI</span>
<span class="w-10 h-10 bg-light border border-border-color rounded-full text-dark flex justify-center items-center font-semibold">AI</span>
<span class="w-11 h-11 bg-light border border-border-color rounded-full text-dark flex justify-center items-center font-semibold">AI</span>
</div>
</div>
Square Avatars with Placeholder
AI
AI
AI
AI
AI
AI
AI
AI
AI
AI
AI
AI
<div class="border-dashed border-primary border px-4.5 py-5 rounded-md">
<div class="flex flex-wrap items-end lg:justify-between justify-start gap-3 lg:mb-12 mb-5">
<span class="w-4 h-4 bg-primary rounded-xs text-xs text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-5 h-5 bg-primary rounded-sm text-xs text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-6 h-6 bg-primary rounded-md text-xs text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-8 h-8 bg-primary rounded-lg text-[13px] text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-10 h-10 bg-primary rounded-lg text-white flex justify-center items-center font-semibold">AI</span>
<span class="w-11 h-11 bg-primary rounded-xl text-white flex justify-center items-center font-semibold">AI</span>
</div>
<div class="flex flex-wrap items-end lg:justify-between justify-start gap-3">
<span class="w-4 h-4 bg-light border border-border-color rounded-xs text-xs text-dark flex justify-center items-center font-semibold">AI</span>
<span class="w-5 h-5 bg-light border border-border-color rounded-sm text-xs text-dark flex justify-center items-center font-semibold">AI</span>
<span class="w-6 h-6 bg-light border border-border-color rounded-md text-xs text-dark flex justify-center items-center font-semibold">AI</span>
<span class="w-8 h-8 bg-light border border-border-color rounded-lg text-[13px] text-dark flex justify-center items-center font-semibold">AI</span>
<span class="w-10 h-10 bg-light border border-border-color rounded-lg text-dark flex justify-center items-center font-semibold">AI</span>
<span class="w-11 h-11 bg-light border border-border-color rounded-xl text-dark flex justify-center items-center font-semibold">AI</span>
</div>
</div>
Circular Avatars with Placeholder Icons
<div class="border-dashed border-primary border px-4.5 py-5 rounded-md">
<div class="flex flex-wrap items-end lg:justify-between justify-start gap-3 lg:mb-12 mb-5">
<span class="w-4 h-4 bg-primary rounded-full text-white flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-5 h-5 bg-primary rounded-full text-white flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-6 h-6 bg-primary rounded-full text-white flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-8 h-8 bg-primary rounded-full text-white flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-10 h-10 bg-primary rounded-full text-white flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-11 h-11 bg-primary rounded-full text-white flex justify-center items-center"><i class="icon icon-user"></i> </span>
</div>
<div class="flex flex-wrap items-end lg:justify-between justify-start gap-3">
<span class="w-4 h-4 bg-light border border-border-color rounded-full text-dark flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-5 h-5 bg-light border border-border-color rounded-full text-dark flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-6 h-6 bg-light border border-border-color rounded-full text-dark flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-8 h-8 bg-light border border-border-color rounded-full text-dark flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-10 h-10 bg-light border border-border-color rounded-full text-dark flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-11 h-11 bg-light border border-border-color rounded-full text-dark flex justify-center items-center"><i class="icon icon-user"></i> </span>
</div>
</div>
Square Avatars with Placeholder Icons
<div class="border-dashed border-primary border px-4.5 py-5 rounded-md">
<div class="flex flex-wrap items-end lg:justify-between justify-start gap-3 lg:mb-12 mb-5">
<span class="w-4 h-4 bg-primary rounded-xs text-white flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-5 h-5 bg-primary rounded-sm text-white flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-6 h-6 bg-primary rounded-md text-white flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-8 h-8 bg-primary rounded-lg text-white flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-10 h-10 bg-primary rounded-lg text-white flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-11 h-11 bg-primary rounded-xl text-white flex justify-center items-center"><i class="icon icon-user"></i> </span>
</div>
<div class="flex flex-wrap items-end lg:justify-between justify-start gap-3">
<span class="w-4 h-4 bg-light border border-border-color rounded-xs text-dark flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-5 h-5 bg-light border border-border-color rounded-sm text-dark flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-6 h-6 bg-light border border-border-color rounded-md text-dark flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-8 h-8 bg-light border border-border-color rounded-lg text-dark flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-10 h-10 bg-light border border-border-color rounded-lg text-dark flex justify-center items-center"><i class="icon icon-user"></i> </span>
<span class="w-11 h-11 bg-light border border-border-color rounded-xl text-dark flex justify-center items-center"><i class="icon icon-user"></i> </span>
</div>
</div>
Circular Avatar Group
<div>
<div class="flex flex-wrap lg:justify-between! justify-center gap-10 items-end border-dashed border-primary border px-4.5 py-5 rounded-md">
<div class="avatar-list-stacked">
<img class="w-6 h-6 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-full border border-border-color" src="assets/img/avatar/avatar-27.jpg" alt="img">
<img class="w-6 h-6 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-full border border-border-color" src="assets/img/avatar/avatar-28.jpg" alt="img">
<img class="w-6 h-6 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-full border border-border-color" src="assets/img/avatar/avatar-29.jpg" alt="img">
<a class="w-6 h-6 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-full border border-border-color text-[12px] bg-light text-dark" href="javascript:void(0);"> +8 </a>
</div>
<div class="avatar-list-stacked">
<img class="w-8 h-8 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-full border border-border-color" src="assets/img/avatar/avatar-01.jpg" alt="img">
<img class="w-8 h-8 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-full border border-border-color" src="assets/img/avatar/avatar-02.jpg" alt="img">
<img class="w-8 h-8 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-full border border-border-color" src="assets/img/avatar/avatar-03.jpg" alt="img">
<a class="w-8 h-8 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-full border border-border-color text-[13px] bg-light text-dark" href="javascript:void(0);"> +8 </a>
</div>
<div class="avatar-list-stacked pr-4.5">
<img class="w-10 h-10 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-full border border-border-color" src="assets/img/avatar/avatar-04.jpg" alt="img">
<img class="w-10 h-10 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-full border border-border-color" src="assets/img/avatar/avatar-05.jpg" alt="img">
<img class="w-10 h-10 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-full border border-border-color" src="assets/img/avatar/avatar-06.jpg" alt="img">
<a class="w-10 h-10 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-full border border-border-color text-[14px] bg-light text-dark" href="javascript:void(0);"> +8 </a>
</div>
</div>
Square Avatar Group
<div>
<div class="flex flex-wrap lg:justify-between! justify-center gap-10 items-end border-dashed border-primary border px-4.5 py-5 rounded-md">
<div class="avatar-list-stacked">
<img class="w-6 h-6 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-md border border-border-color" src="assets/img/avatar/avatar-06.jpg" alt="img">
<img class="w-6 h-6 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-md border border-border-color" src="assets/img/avatar/avatar-07.jpg" alt="img">
<img class="w-6 h-6 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-md border border-border-color" src="assets/img/avatar/avatar-08.jpg" alt="img">
<a class="w-6 h-6 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-md border border-border-color text-[12px] bg-light text-dark" href="javascript:void(0);"> +8 </a>
</div>
<div class="avatar-list-stacked">
<img class="w-8 h-8 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-lg border border-border-color" src="assets/img/avatar/avatar-09.jpg" alt="img">
<img class="w-8 h-8 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-lg border border-border-color" src="assets/img/avatar/avatar-10.jpg" alt="img">
<img class="w-8 h-8 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-lg border border-border-color" src="assets/img/avatar/avatar-11.jpg" alt="img">
<a class="w-8 h-8 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-lg border border-border-color text-[13px] bg-light text-dark" href="javascript:void(0);"> +8 </a>
</div>
<div class="avatar-list-stacked pr-4.5">
<img class="w-10 h-10 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-lg border border-border-color" src="assets/img/avatar/avatar-12.jpg" alt="img">
<img class="w-10 h-10 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-lg border border-border-color" src="assets/img/avatar/avatar-13.jpg" alt="img">
<img class="w-10 h-10 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-lg border border-border-color" src="assets/img/avatar/avatar-14.jpg" alt="img">
<a class="w-10 h-10 inline-flex items-center justify-center font-medium hover:-translate-y-[0.188rem] hover:z-1 transition-transform duration-150 ease-in-out -me-3.5 align-middle rounded-lg border border-border-color text-[14px] bg-light text-dark" href="javascript:void(0);"> +8 </a>
</div>
</div>
</div>
Circular Avatars with Dot
<div class="border-dashed border-primary border px-4.5 py-5 rounded-md">
<div class="flex flex-wrap items-end lg:justify-between justify-start gap-3 lg:mb-12 mb-5">
<span class="w-4 h-4 relative bg-light border border-border-color rounded-full text-dark flex justify-center items-center"><i class="icon icon-user"></i><span class="-bottom-0.5 -end-0.5 absolute size-1.5 bg-success border border-white rounded-full"></span></span>
<span class="w-5 h-5 relative bg-light border border-border-color rounded-full text-dark flex justify-center items-center"><i class="icon icon-user"></i><span class="bottom-0 end-0 absolute size-1.5 bg-success border border-white rounded-full"></span></span>
<span class="w-6 h-6 relative bg-light border border-border-color rounded-full text-dark flex justify-center items-center"><i class="icon icon-user"></i><span class="bottom-0 end-0 absolute size-1.5 bg-success border border-white rounded-full"></span></span>
<span class="w-8 h-8 relative bg-light border border-border-color rounded-full text-dark flex justify-center items-center"><i class="icon icon-user"></i><span class="bottom-0 end-0 absolute size-2 bg-success border border-white rounded-full"></span></span>
<span class="w-10 h-10 relative bg-light border border-border-color rounded-full text-dark flex justify-center items-center"><i class="icon icon-user"></i><span class="bottom-0.5 end-0.5 absolute size-2 bg-success border border-white rounded-full"></span></span>
<span class="w-11 h-11 relative bg-light border border-border-color rounded-full text-dark flex justify-center items-center"><i class="icon icon-user"></i><span class="bottom-0 end-1.5 absolute size-2 bg-success border border-white rounded-full"></span></span>
</div>
<div class="flex flex-wrap items-end lg:justify-between justify-start gap-3">
<span class="relative"><img class="w-4 h-4 border border-border-color rounded-full" src="assets/img/avatar/avatar-15.jpg" alt="avatar"><span class="bottom-0 -end-0.5 absolute size-1.5 bg-success border border-white rounded-full"></span></span>
<span class="relative"><img class="w-5 h-5 border border-border-color rounded-full" src="assets/img/avatar/avatar-16.jpg" alt="avatar"><span class="bottom-0 end-0 absolute size-1.5 bg-success border border-white rounded-full"></span></span>
<span class="relative"><img class="w-6 h-6 border border-border-color rounded-full" src="assets/img/avatar/avatar-17.jpg" alt="avatar"><span class="bottom-0 end-0.5 absolute size-1.5 bg-success border border-white rounded-full"></span></span>
<span class="relative"><img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-18.jpg" alt="avatar"><span class="bottom-0 end-0.5 absolute size-2 bg-success border border-white rounded-full"></span></span>
<span class="relative"><img class="w-10 h-10 border border-border-color rounded-full" src="assets/img/avatar/avatar-19.jpg" alt="avatar"><span class="bottom-0 end-1.5 absolute size-2 bg-success border border-white rounded-full"></span></span>
<span class="relative"><img class="w-12 h-12 border border-border-color rounded-full" src="assets/img/avatar/avatar-20.jpg" alt="avatar"><span class="bottom-0 end-1.75 absolute size-2 bg-success border border-white rounded-full"></span></span>
</div>
</div>
Square Avatars with Dot
<div class="border-dashed border-primary border px-4.5 py-5 rounded-md">
<div class="flex flex-wrap items-end lg:justify-between justify-start gap-3 lg:mb-12 mb-5">
<span class="w-4 h-4 relative bg-light border border-border-color rounded-xs text-dark flex justify-center items-center"><i class="icon icon-user"></i><span class="bottom-0 end-0 absolute size-1.5 bg-success border border-white rounded-full"></span></span>
<span class="w-5 h-5 relative bg-light border border-border-color rounded-sm text-dark flex justify-center items-center"><i class="icon icon-user"></i><span class="bottom-0 end-0 absolute size-1.5 bg-success border border-white rounded-full"></span></span>
<span class="w-6 h-6 relative bg-light border border-border-color rounded-md text-dark flex justify-center items-center"><i class="icon icon-user"></i><span class="bottom-0 end-0 absolute size-1.5 bg-success border border-white rounded-full"></span></span>
<span class="w-8 h-8 relative bg-light border border-border-color rounded-lg text-dark flex justify-center items-center"><i class="icon icon-user"></i><span class="bottom-0 end-0 absolute size-2 bg-success border border-white rounded-full"></span></span>
<span class="w-10 h-10 relative bg-light border border-border-color rounded-lg text-dark flex justify-center items-center"><i class="icon icon-user"></i><span class="bottom-0 end-0 absolute size-2 bg-success border border-white rounded-full"></span></span>
<span class="w-11 h-11 relative bg-light border border-border-color rounded-xl text-dark flex justify-center items-center"><i class="icon icon-user"></i><span class="bottom-0 end-0 absolute size-2 bg-success border border-white rounded-full"></span></span>
</div>
<div class="flex flex-wrap items-end lg:justify-between justify-start gap-3">
<span class="relative"><img class="w-4 h-4 border border-border-color rounded-xs" src="assets/img/avatar/avatar-21.jpg" alt="avatar"><span class="bottom-0 end-0 absolute size-1.5 bg-success border border-white rounded-full"></span></span>
<span class="relative"><img class="w-5 h-5 border border-border-color rounded-sm" src="assets/img/avatar/avatar-22.jpg" alt="avatar"><span class="bottom-0 end-0 absolute size-1.5 bg-success border border-white rounded-full"></span></span>
<span class="relative"><img class="w-6 h-6 border border-border-color rounded-md" src="assets/img/avatar/avatar-23.jpg" alt="avatar"><span class="bottom-0 end-0 absolute size-1.5 bg-success border border-white rounded-full"></span></span>
<span class="relative"><img class="w-8 h-8 border border-border-color rounded-lg" src="assets/img/avatar/avatar-24.jpg" alt="avatar"><span class="bottom-0 end-0 absolute size-2 bg-success border border-white rounded-full"></span></span>
<span class="relative"><img class="w-10 h-10 border border-border-color rounded-lg" src="assets/img/avatar/avatar-25.jpg" alt="avatar"><span class="bottom-0 end-0 absolute size-2 bg-success border border-white rounded-full"></span></span>
<span class="relative"><img class="w-12 h-12 border border-border-color rounded-xl" src="assets/img/avatar/avatar-26.jpg" alt="avatar"><span class="bottom-0 end-0 absolute size-2 bg-success border border-white rounded-full"></span></span>
</div>
</div>