-
Notification
-
Dmitriy Groshev
Hi, i am josephin. How are you...
17:123 -
Sufiya Elija
I need job, Please help me.
Fri -
Janis Evans
Good Morning!
8:2212 -
Mukrani Pabelo
Hi, i am josephin. How are you...
03:1410 -
Josephin Water
You’ve got some kind of a stom...
Thu -
Janis Evans
Good Morning!
8:2212 -
Sufiya Elija
I need job, Please help me.
Fri
-
-
-
-
Cart Items (25)
-
Flower Pot
$25.00
-
Iphone Max pro
$35.20
-
Royal Party Glass
$45.10
-
Water Proof Watch
$12.30
-
Traveling Duffle Bag
$32.10
Proceed to CheckoutAdd Total
$250.00 -
-
-
-
English -
French -
Spanich -
Arabic
-
-
Helen Walter
Admin
Avatars
Avatar Sizes
Using .w-[size] class you can add custom size for avatar.
<div class="flex flex-wrap items-center gap-[8px] 2xl:gap-[6px]">
<div class="avatar">
<div class="w-28 rounded">
<img src="../../image.jpg" alt="avatar"/>
</div>
</div>
<div class="avatar">
<div class="w-24 rounded">
<img src="../../image.jpg" alt="avatar"/>
</div>
</div>
<div class="avatar">
<div class="w-20 rounded">
<img src="../../image.jpg" alt="avatar"/>
</div>
</div>
<div class="avatar">
<div class="w-16 rounded">
<img src="../../image.jpg" alt="avatar"/>
</div>
</div>
</div>
Avatar Shapes
You can use .rounded-* class to create avatar shapes.
<div class="flex flex-wrap items-center gap-[8px] 2xl:gap-[6px]">
<div class="avatar rounded-none">
<div class="w-28 ">
<img src="../../image.jpg" alt="avatar"/>
</div>
</div>
<div class="avatar rounded-xl">
<div class="w-24">
<img src="../../image.jpg" alt="avatar"/>
</div>
</div>
<div class="avatar rounded-3xl">
<div class="w-20">
<img src="../../image.jpg" alt="avatar"/>
</div>
</div>
<div class="avatar rounded-full">
<div class="w-16">
<img src="../../image.jpg" alt="avatar"/>
</div>
</div>
</div>
Avatar Status
.status-* class can help you to indicate the status of avatar.
<div class="flex flex-wrap items-center gap-[8px] 2xl:gap-[6px]">
<div class="avatar">
<div class="w-28 rounded relative overflow-visible">
<img src="../../image.jpg" alt="avatar"/>
<div class="status-offline"></div>
</div>
</div>
<div class="avatar">
<div class="w-24 rounded relative overflow-visible">
<img src="../../image.jpg" alt="avatar"/>
<div class="status-online"></div>
</div>
</div>
<div class="avatar">
<div class="w-20 rounded relative overflow-visible">
<img src="../../image.jpg" alt="avatar"/>
<div class="status-online"></div>
</div>
</div>
<div class="avatar">
<div class="w-16 rounded relative overflow-visible">
<img src="../../image.jpg" alt="avatar"/>
<div class="status-dnd"></div>
</div>
</div>
</div>
Avatar Groups
Using .avatar-group class you can create the group of avatars with the size.
<div class="flex flex-wrap items-center gap-[8px] 2xl:gap-[6px]">
<div class="avatar-group justify-center items-center">
<div class="avatar border-white rounded-xl">
<div class="w-24">
<img src="../../image.jpg" alt="avatar"/>
</div>
</div>
<div class="avatar border-white rounded-xl">
<div class="w-20">
<img src="../../image.jpg" alt="avatar"/>
</div>
</div>
<div class="avatar border-white rounded-xl">
<div class="w-16">
<span class="text-xs font-bold text-title"/> 26+
</div>
</div>
<div class="avatar-group justify-center items-center">
<div class="avatar border-white">
<div class="w-20">
<img src="../../image.jpg" alt="avatar"/>
</div>
</div>
<div class="avatar border-white">
<div class="w-16">
<img src="../../image.jpg" alt="avatar"/>
</div>
</div>
<div class="avatar border-white">
<div class="w-12">
<span class="text-xs font-bold text-title"/> 26+
</div>
</div>
<div class="avatar-group justify-center items-center">
<div class="avatar border-white">
<div class="w-12">
<img src="../../image.jpg" alt="avatar"/>
</div>
</div>
<div class="avatar border-white">
<div class="w-12">
<img src="../../image.jpg" alt="avatar"/>
</div>
</div>
<div class="avatar border-white">
<div class="w-12">
<span class="text-xs font-bold text-title"/> 26+
</div>
</div>
</div>
</div>
Avatar Groups with Counter
Using .avatar-group class you can create the group of avatars with the counter.
26+
26+
26+
<div class="flex flex-wrap items-center gap-[8px] 2xl:gap-[6px]">
<div class="avatar-group justify-center items-center">
<div class="avatar border-white rounded-none">
<div class="w-24">
<img src="../../image.jpg" alt="avatar"/>
</div>
</div>
<div class="avatar border-white rounded-3xl">
<div class="w-20">
<img src="../../image.jpg" alt="avatar"/>
</div>
</div>
<div class="avatar border-white">
<div class="w-16">
<span class="text-xs font-bold text-title"/> 26+
</div>
</div>
<div class="avatar-group justify-center items-center">
<div class="avatar border-white">
<div class="w-20">
<img src="../../image.jpg" alt="avatar"/>
</div>
</div>
<div class="avatar border-white">
<div class="w-16">
<img src="../../image.jpg" alt="avatar"/>
</div>
</div>
<div class="avatar border-white">
<div class="w-12">
<span class="text-xs font-bold text-title"/> 26+
</div>
</div>
<div class="avatar-group justify-center items-center">
<div class="avatar border-white">
<div class="w-12">
<img src="../../image.jpg" alt="avatar"/>
</div>
</div>
<div class="avatar border-white">
<div class="w-12">
<img src="../../image.jpg" alt="avatar"/>
</div>
</div>
<div class="avatar border-white">
<div class="w-12">
<span class="text-xs font-bold text-title"/> 26+
</div>
</div>
</div>
</div>
Avatar Ping
Using .animate-ping class you can indicate important message.
<div class="flex flex-wrap items-center gap-[8px] 2xl:gap-[6px]">
<div class="avatar">
<div class="w-14 rounded relative overflow-visible">
<img src="../../image.jpg" alt="avatar"/>
<div class="status-online animate-ping"></div>
</div>
</div>
<div class="avatar">
<div class="w-12 rounded relative overflow-visible">
<img src="../../image.jpg" alt="avatar"/>
<div class="status-online animate-ping"></div>
</div>
</div>
<div class="avatar">
<div class="w-11 rounded relative overflow-visible">
<img src="../../image.jpg" alt="avatar"/>
<div class="status-dnd animate-ping"></div>
</div>
</div>
<div class="avatar">
<div class="w-10 rounded relative overflow-visible">
<img src="../../image.jpg" alt="avatar"/>
<div class="status-offline"></div>
</div>
</div>
<div class="avatar">
<div class="w-9 rounded relative overflow-visible">
<img src="../../image.jpg" alt="avatar"/>
<div class="status-offline animate-ping"></div>
</div>
</div>
</div>
Avatar Initial
You can use initial letter as a avatar.
T
H
E
M
E
<div class="flex flex-wrap items-center gap-[8px] 2xl:gap-[6px]">
<div class="avatar inline-flex">
<div class="w-14 rounded flex justify-center items-center bg-gray-light">
<span class="text-3xl"> T </span>
</div>
</div>
<div class="avatar inline-flex">
<div class="w-12 rounded flex justify-center items-center bg-gray-light">
<span class="text-2xl"> H </span>
</div>
</div>
<div class="avatar inline-flex">
<div class="w-11 rounded flex justify-center items-center bg-gray-light">
<span class="text-xl"> E </span>
</div>
</div>
<div class="avatar inline-flex">
<div class="w-10 rounded flex justify-center items-center bg-gray-light">
<span class="text-lg"> M </span>
</div>
</div>
<div class="avatar inline-flex">
<div class="w-9 rounded flex justify-center items-center bg-gray-light">
<span class="text-sm"> E </span>
</div>
</div>
</div>
Avatar Icon
Using icon You can make icon avatars.
<div class="flex flex-wrap items-center gap-[8px] 2xl:gap-[6px]">
<div class="avatar">
<div>
+SVG_ICON("Heart","w-[50px] h-[50px] fill-none
stroke-white bg-primary p-2")
</div>
</div>
<div class="avatar">
<div>
+SVG_ICON("Heart","w-[50px] h-[50px] fill-none
stroke-white bg-success p-2")
</div>
</div>
<div class="avatar">
<div>
+SVG_ICON("Heart","w-[50px] h-[50px] fill-none
stroke-white bg-info p-2")
</div>
</div>
<div class="avatar">
<div>
+SVG_ICON("Heart","w-[50px] h-[50px] fill-none
stroke-white bg-danger p-2")
</div>
</div>
<div class="avatar">
<div>
+SVG_ICON("Heart","w-[50px] h-[50px] fill-none
stroke-white bg-warning p-2")
</div>
</div>
</div>