Avatars — Lumora

Living Documentation

Avatar patterns for people, teams, and status-rich identity chips

This page defines avatar composition rules for profile images, initials, icon placeholders, stacks, status dots, and unread counters. Use the playground to generate copy-ready combinations that fit tables, cards, and chat surfaces.

Variant matrix Group stacks Live controls Copy-ready snippets

Catalog Blocks 6 Variants, size/layout, states, composition, snippets, playground

Avatar Types 3 Image, initials, icon placeholder

Sizes 4 sm, md, lg, xl with consistent ring/badge scaling

Preview State Initials - Medium Updates from playground controls

1. Variant Matrix

Primary avatar styles used across Lumora surfaces

Image avatars

Initials and icon placeholders

CA RK

2. Interaction Playground

Configure and generate a production avatar pattern

Avatar Type

Size

Intent

Status Dot

Square shape

Ring highlight

Notification badge

Live Output

Initials Medium

Initials, medium size, no status indicators.

3. Size and Layout

Standard scale ramp for dense and spacious contexts

Size ramp

SM MD LG XL

Stacked team cluster

8 members

4. State Modeling

Presence state and unread activity patterns

Presence indicators

Unread badge

5. Composition Patterns

Avatar usage in table rows, chat, and assignee selectors

User row identity

Nina Verma

Product Manager

Assignees

6. Real-use Snippets

Copy-ready snippets for basic avatar, status avatar, and stacked group

Initials Avatar

<span class="avatar-lumora avatar-lumora--md avatar-lumora--soft-primary">
  CA
</span>

Avatar with Status

<span class="avatar-lumora avatar-lumora--md">
  <img src="/assets/img/avatars/user-1.jpg" alt="User" />
  <span class="avatar-lumora__status avatar-lumora__status--away"></span>
</span>

Avatar Stack

<div class="avatar-stack">
  <span class="avatar-lumora avatar-lumora--sm"><img src="/a1.jpg" alt="" /></span>
  <span class="avatar-lumora avatar-lumora--sm"><img src="/a2.jpg" alt="" /></span>
  <span class="avatar-lumora avatar-lumora--sm avatar-lumora--soft-primary">+4</span>
</div>