Avatar

User or entity representation with image fallback to initials. Three sizes: small, medium, large. Use in user lists, comments, nav user-menus, chat messages. Initials render automatically when the image fails to load, or when the avatar has no <img> at all.

a11y (built in): each person avatar is a role="img" node named by aria-label, with the inner <img alt=""> left decorative — one accessible name, announced once. The initials fallback swaps only the element's children, so the role and the name survive whether the photo loads, fails late, or had already failed before init ran.

Sizes

Three sizes — large (3rem), medium (2.5rem), small (2rem). Match the size to the surrounding type and density.

Initials fallback

If data-lb-initials is set and the <img> fails to load (404, network error, missing CDN), the avatar automatically falls back to rendering the initials. The example below points at a deliberately broken path to demonstrate.

Avatar Group

Stacked overlapping avatars for team UIs, collaborators, assignees, attendees. Optional "+N more" counter at the tail for truncated lists. Pure composition over the Avatar component above — no new JS.

Usage: <div class="lb-avatar-group lb-avatar-group--medium"> holds regular .lb-avatar children. Group size modifier should match the avatar size. Add a .lb-avatar.lb-avatar-group__count at the tail for a "+N" chip. Optional --hover-expand fans the group apart on hover.

Sizes

Three sizes matching the Avatar component. Overlap scales proportionally.

With images

Same structure, real images via .lb-avatar__img. Fallback to initials via data-lb-initials if the image fails.

With overflow counter

Show the first N avatars + a count chip for the rest. The counter is just a regular Avatar with the __count modifier class — it inherits the same size automatically.

+8

Hover to expand

Add --hover-expand to fan the group apart on hover — useful when avatars are small and users want to see all faces at once. Hover the group below:

In a table row

Common use case: "Assignees" or "Reviewers" column. Small size fits comfortably in a 40px row.