Monsoon v0.2.0
Made by Alexandre Kohler Star

Data display and layout

Avatar

A picture or initials for a person, with sizes, shapes, a ring and a status dot.

Data display and layout13 classesNo JavaScriptLight and dark

Example

Full

Classes

13 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.

ClassTypeWhat it does
Base Base class of the avatar. On a <span> in the example. Sets inline-flex display, alignment, width, height, corner radius and background, and --avatar-size and --avatar-r.
CSS
.avatar-group > .avatar {
  box-shadow: 0 0 0 2px var(--background);
}

.avatar-group > .avatar + .avatar {
  margin-inline-start: calc(var(--avatar-size) * -0.22);
}
Size Extra small size. On a <span> in the example. Sets --avatar-size.
CSS
.avatar-xs {
  --avatar-size: 1.5rem;
}
Size Small size. On a <span> in the example. Sets --avatar-size.
CSS
.avatar-sm {
  --avatar-size: 2rem;
}
Size Large size. On a <span> in the example. Sets --avatar-size.
CSS
.avatar-lg {
  --avatar-size: 3.5rem;
}
Size Extra large size. On a <span> in the example. Sets --avatar-size.
CSS
.avatar-xl {
  --avatar-size: 5rem;
}
Modifier Modifier, combined with the avatar class. On a <span> in the example. Sets --avatar-r.
CSS
.avatar-rounded {
  --avatar-r: 28%;
}
Modifier Modifier, combined with the avatar class. On a <span> in the example. Sets --avatar-r.
CSS
.avatar-square {
  --avatar-r: var(--m-radius-sm);
}
Modifier Modifier, combined with the avatar class. On a <span> in the example. Sets shadow.
CSS
.avatar-ring {
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--primary);
}
Modifier Modifier, combined with the avatar class. On a <span> in the example. Sets background and text color.
CSS
.avatar-placeholder {
  background: color-mix(in oklab, var(--primary) 16%, var(--surface));
  color: var(--primary);
}
Modifier Modifier, combined with the avatar class. On a <span> in the example. Sets --avatar-status.
CSS
.avatar-online {
  --avatar-status: var(--success);
}

:is(.avatar-online, .avatar-offline, .avatar-busy, .avatar-away)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: max(0.5rem, calc(var(--avatar-size) * 0.26));
  height: max(0.5rem, calc(var(--avatar-size) * 0.26));
  border-radius: 50%;
  background: var(--avatar-status);
  box-shadow: 0 0 0 2px var(--background);
}
Modifier Modifier, combined with the avatar class. Not used in the example above. Sets generated content, absolute position, offsets, width, height and corner radius, and --avatar-status.
CSS
.avatar-offline {
  --avatar-status: var(--muted-foreground);
}

:is(.avatar-online, .avatar-offline, .avatar-busy, .avatar-away)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: max(0.5rem, calc(var(--avatar-size) * 0.26));
  height: max(0.5rem, calc(var(--avatar-size) * 0.26));
  border-radius: 50%;
  background: var(--avatar-status);
  box-shadow: 0 0 0 2px var(--background);
}
Modifier Modifier, combined with the avatar class. On a <span> in the example. Sets generated content, absolute position, offsets, width, height and corner radius, and --avatar-status.
CSS
.avatar-busy {
  --avatar-status: var(--danger);
}

:is(.avatar-online, .avatar-offline, .avatar-busy, .avatar-away)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: max(0.5rem, calc(var(--avatar-size) * 0.26));
  height: max(0.5rem, calc(var(--avatar-size) * 0.26));
  border-radius: 50%;
  background: var(--avatar-status);
  box-shadow: 0 0 0 2px var(--background);
}
Modifier Modifier, combined with the avatar class. On a <span> in the example. Sets generated content, absolute position, offsets, width, height and corner radius, and --avatar-status.
CSS
.avatar-away {
  --avatar-status: var(--warning);
}

:is(.avatar-online, .avatar-offline, .avatar-busy, .avatar-away)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: max(0.5rem, calc(var(--avatar-size) * 0.26));
  height: max(0.5rem, calc(var(--avatar-size) * 0.26));
  border-radius: 50%;
  background: var(--avatar-status);
  box-shadow: 0 0 0 2px var(--background);
}

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.

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

<!-- Avatar: start from the base class, then add modifiers -->
<div class="flex items-center gap-4"><span class="avatar avatar-xs avatar-placeholder">AK</span><span class="avatar avatar-sm avatar-placeholder avatar-online">MS</span><span class="avatar avatar-placeholder avatar-busy">JD</span><span class="avatar avatar-lg avatar-rounded avatar-ring bg-gradient-to-br from-primary to-accent"></span><span class="avatar avatar-xl avatar-square avatar-placeholder avatar-away">LP</span></div>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

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.
Data display and layoutAvatar groupOverlapping avatars with a count for the rest.Media and filesAvatar uploadClick, drop or paste a picture to crop it in a circle inside a dialog; saving puts the cropped File into the file input so FormData sends it, writes a data URL into a hidden input when there is one and updates the picture. It needs monsoon.js. Without it the original file is sent.Data display and layoutCard overlayA card whose body sits over its media on a readable gradient.Data display and layoutCard sideA horizontal card with the media on the side, here in the compact size.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.