Application toolkit - Avatar group
An avatar group displays a number of avatars grouped together in a stack or grid.
Stack
Avatar group stacked small to large sizes.
Open this stack avatar group example in new window
Copy stack avatar group code
Close stack avatar group code
<div class="flex flex-col flex-wrap gap-2">
<div class="flex -space-x-2">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-2.jpg" alt="Image Description">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-3.jpg" alt="Image Description">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-4.jpg" alt="Image Description">
</div>
<div class="flex -space-x-2">
<img class="inline-block h-[2.375rem] w-[2.375rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
<img class="inline-block h-[2.375rem] w-[2.375rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-2.jpg" alt="Image Description">
<img class="inline-block h-[2.375rem] w-[2.375rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-3.jpg" alt="Image Description">
<img class="inline-block h-[2.375rem] w-[2.375rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-4.jpg" alt="Image Description">
</div>
<div class="flex -space-x-2">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-2.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-3.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-4.jpg" alt="Image Description">
</div>
<div class="flex -space-x-2">
<img class="inline-block h-[3.875rem] w-[3.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
<img class="inline-block h-[3.875rem] w-[3.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-2.jpg" alt="Image Description">
<img class="inline-block h-[3.875rem] w-[3.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-3.jpg" alt="Image Description">
<img class="inline-block h-[3.875rem] w-[3.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-4.jpg" alt="Image Description">
</div>
</div>Grid
Avatar group displayed in a grid.
Open this grid avatar group example in new window
Copy grid avatar group code
Close grid avatar group code
<div class="grid grid-cols-3 gap-4">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-2.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-3.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-4.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-5.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-6.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-7.jpg" alt="Image Description">
<span class="inline-flex items-center justify-center h-[2.875rem] w-[2.875rem] rounded-full bg-gray-100 border-2 border-gray-200 dark:bg-gray-600 dark:border-gray-700">
<span class="font-medium text-gray-500 leading-none dark:text-gray-400">9+</span>
</span>
</div>Border color
The color of the border around the avatar. Any color that the CSS border-color property accepts can be used.
Open this border colour avatar group example in new window
Copy border colour avatar group code
Close border colour avatar group code
<div class="flex -space-x-2">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-hs2-primary" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-hs2-primary" src="/assets/images/app-toolkit/avatar-2.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-hs2-primary" src="/assets/images/app-toolkit/avatar-3.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-hs2-primary" src="/assets/images/app-toolkit/avatar-4.jpg" alt="Image Description">
</div>With dropdown
Display a group of avatars that do not fit with the dropdown menu by clicking or hovering on the initial.
Open this with dropdown avatar group example in new window
Copy with dropdown avatar group code
Close with dropdown avatar group code
<div class="flex -space-x-2">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white" src="/assets/images/app-toolkit/avatar-2.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white" src="/assets/images/app-toolkit/avatar-3.jpg" alt="Image Description">
<img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white" src="/assets/images/app-toolkit/avatar-4.jpg" alt="Image Description">
<div class="hs-dropdown relative inline-flex [--placement:top-left]">
<button id="hs-dropdown-avatar-more" class="hs-dropdown-toggle inline-flex items-center justify-center h-[2.875rem] w-[2.875rem] rounded-full bg-gray-200 border-2 border-white font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-300 focus:outline-none focus:bg-blue-100 focus:text-blue-600 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-800 dark:text-gray-400 dark:hover:text-white dark:focus:bg-blue-100 dark:focus:text-blue-600 dark:focus:ring-offset-gray-800">
<span class="font-medium leading-none">9+</span>
</button>
<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-72 hidden z-10 transition-[margin,opacity] opacity-0 duration-300 mb-2 min-w-[15rem] bg-white shadow-md rounded-lg p-2 dark:bg-gray-800 dark:border dark:border-gray-700 dark:divide-gray-700">
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Chris Lynch
</a>
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Maria Guan
</a>
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Amil Evara
</a>
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Ebele Egbuna
</a>
</div>
</div>
</div>