Avatar
User or entity profile representation.
<div class="flex gap-20px items-center">
<!-- L With image -->
<div class="flex rounded-full overflow-hidden w-48px h-48px">
<img
src="/assets/images/shared/avatar.png"
class="object-cover w-full h-full"
loading="lazy"
alt="avatar">
</img>
</div>
<!-- L Empty image -->
<div class="flex rounded-full items-center justify-center bg-black-100 overflow-hidden w-48px h-48px">
<span class="text-black-500 text-p1">
K
</span>
</div>
<!-- M With image -->
<div class="flex rounded-full overflow-hidden w-32px h-32px">
<img
src="/assets/images/shared/avatar.png"
class="object-cover w-full h-full"
loading="lazy"
alt="avatar">
</img>
</div>
<!-- M Empty image -->
<div class="flex rounded-full items-center justify-center bg-black-100 overflow-hidden w-32px h-32px">
<span class="text-black-500 text-p3">
K
</span>
</div>
<!-- S With image -->
<div class="flex rounded-full overflow-hidden w-24px h-24px">
<img
src="/assets/images/shared/avatar.png"
class="object-cover w-full h-full"
loading="lazy"
alt="avatar">
</img>
</div>
<!-- S Empty image -->
<div class="flex rounded-full items-center justify-center bg-black-100 overflow-hidden w-24px h-24px">
<span class="text-black-500 text-p4">
K
</span>
</div>
</div>
With text
<div class="flex flex-col gap-16px">
<!-- With image -->
<div class="flex gap-12px items-center">
<div class="flex rounded-full overflow-hidden w-24px h-24px">
<img
src="/assets/images/shared/avatar.png"
class="object-cover w-full h-full"
loading="lazy"
alt="avatar">
</img>
</div>
<p class="text-p2">
Kaida
</p>
</div>
<!-- Empty image -->
<div class="flex gap-12px items-center">
<div class="flex rounded-full items-center justify-center bg-black-100 overflow-hidden w-24px h-24px">
<span class="text-black-500 text-p4">
K
</span>
</div>
<p class="text-p2">
Kaida
</p>
</div>
</div>
Group
<div class="flex flex-col gap-32px justify-center items-center">
<!-- L Group -->
<div class="flex items-center">
<div class="grid border border-transparent rounded-full dark:border-black">
<div class="flex rounded-full overflow-hidden w-48px h-48px">
<img
src="/assets/images/shared/avatar.png"
class="object-cover w-full h-full"
loading="lazy"
alt="avatar">
</img>
</div>
</div>
<div class="grid border border-white rounded-full dark:border-black -ms-[9px]">
<div class="flex rounded-full items-center justify-center bg-black-100 overflow-hidden w-48px h-48px">
<span class="text-black-500 text-p1">
K
</span>
</div>
</div>
<div class="grid border border-white rounded-full dark:border-black -ms-[9px]">
<div class="flex rounded-full items-center justify-center bg-black-100 overflow-hidden w-48px h-48px">
<span class="text-black-500 text-p1">
D
</span>
</div>
</div>
<div class="grid border border-white rounded-full dark:border-black -ms-[9px]">
<div class="flex rounded-full items-center justify-center bg-black-100 overflow-hidden w-48px h-48px">
<span class="text-black-500 text-p1">
+2
</span>
</div>
</div>
</div>
<!-- M Group -->
<div class="flex items-center">
<div class="grid border border-transparent rounded-full dark:border-black">
<div class="flex rounded-full overflow-hidden w-32px h-32px">
<img
src="/assets/images/shared/avatar.png"
class="object-cover w-full h-full"
loading="lazy"
alt="avatar">
</img>
</div>
</div>
<div class="grid border border-white rounded-full dark:border-black -ms-[5px]">
<div class="flex rounded-full items-center justify-center bg-black-100 overflow-hidden w-32px h-32px">
<span class="text-black-500 text-p3">
K
</span>
</div>
</div>
<div class="grid border border-white rounded-full dark:border-black -ms-[5px]">
<div class="flex rounded-full items-center justify-center bg-black-100 overflow-hidden w-32px h-32px">
<span class="text-black-500 text-p3">
D
</span>
</div>
</div>
<div class="grid border border-white rounded-full dark:border-black -ms-[5px]">
<div class="flex rounded-full items-center justify-center bg-black-100 overflow-hidden w-32px h-32px">
<span class="text-black-500 text-p3">
+2
</span>
</div>
</div>
</div>
<!-- S Group -->
<div class="flex items-center">
<div class="grid border border-transparent rounded-full dark:border-black">
<div class="flex rounded-full overflow-hidden w-24px h-24px">
<img
src="/assets/images/shared/avatar.png"
class="object-cover w-full h-full"
loading="lazy"
alt="avatar">
</img>
</div>
</div>
<div class="grid border border-white rounded-full dark:border-black -ms-[5px]">
<div class="flex rounded-full items-center justify-center bg-black-100 overflow-hidden w-24px h-24px">
<span class="text-black-500 text-p4">
K
</span>
</div>
</div>
<div class="grid border border-white rounded-full dark:border-black -ms-[5px]">
<div class="flex rounded-full items-center justify-center bg-black-100 overflow-hidden w-24px h-24px">
<span class="text-black-500 text-p4">
D
</span>
</div>
</div>
<div class="grid border border-white rounded-full dark:border-black -ms-[5px]">
<div class="flex rounded-full items-center justify-center bg-black-100 overflow-hidden w-24px h-24px">
<span class="text-black-500 text-p4">
+2
</span>
</div>
</div>
</div>
</div>
Usage
Just copy-paste the HTML or Figma code into your project.