Data Display avatardatagroup

Overlapping Avatars

A set of user avatars clustered together, perfect for

AJ
MK
SL
+4

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { OverlappingAvatars } from 'astro-component-kit';
---

<AvatarGroupStack>Content</AvatarGroupStack>
--- import { OverlappingAvatars } from 'astro-component-kit'; --- <AvatarGroupStack>Content</AvatarGroupStack>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/OverlappingAvatars.astro and paste the following code:

astro 
---
---
<div class="av-group">
  <div class="av" style="background:#6366f1">AJ</div>
  <div class="av" style="background:#8b5cf6">MK</div>
  <div class="av" style="background:#ec4899">SL</div>
  <div class="av more">+4</div>
</div>
<style>
  .av-group { display: flex; align-items: center; }
  .av { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #080b14; margin-left: -10px; display: grid; place-items: center; font-size: 0.65rem; font-weight: 800; color: #fff; position: relative; transition: 0.2s; cursor: pointer; }
  .av:first-child { margin-left: 0; }
  .av:hover { transform: translateY(-4px); z-index: 10; }
  .more { background: #1e293b; color: #94a3b8; border-style: dashed; }
</style>
--- --- <div class="av-group"> <div class="av" style="background:#6366f1">AJ</div> <div class="av" style="background:#8b5cf6">MK</div> <div class="av" style="background:#ec4899">SL</div> <div class="av more">+4</div> </div> <style> .av-group { display: flex; align-items: center; } .av { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #080b14; margin-left: -10px; display: grid; place-items: center; font-size: 0.65rem; font-weight: 800; color: #fff; position: relative; transition: 0.2s; cursor: pointer; } .av:first-child { margin-left: 0; } .av:hover { transform: translateY(-4px); z-index: 10; } .more { background: #1e293b; color: #94a3b8; border-style: dashed; } </style>

Quick Info

Category
Data Display
Filename
OverlappingAvatars.astro
Dependencies
None — pure Astro + CSS
Tags
avatardatagroup