Avatar group

#Example

<div class="avatar-group"><span class="avatar avatar-placeholder">AK</span><span class="avatar avatar-placeholder">MS</span><span class="avatar bg-gradient-to-br from-primary to-accent"></span><span class="avatar avatar-placeholder">JD</span><span class="avatar avatar-count">+12</span></div>

#Classes

2 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

.avatar-group {
  display: inline-flex;
  align-items: center;
}

.avatar-group > .avatar {
  box-shadow: 0 0 0 2px var(--background);
}

.avatar-count {
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: calc(var(--avatar-size) * 0.32);
}

#Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Avatar group: start from the base class, then add modifiers -->
<div class="avatar-group"><span class="avatar avatar-placeholder">AK</span><span class="avatar avatar-placeholder">MS</span><span class="avatar bg-gradient-to-br from-primary to-accent"></span><span class="avatar avatar-placeholder">JD</span><span class="avatar avatar-count">+12</span></div>

#Accessibility

• Give meaningful images an alt text and decorative ones alt="". Initials avatars should expose the full name to screen readers.
• Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.

#Related components