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