Avatar

Circular avatar with image or initials fallback, optional status indicator.

Sizes

<!-- Small: 32px -->
<div class="nano-avatar nano-avatar--sm">
  <span class="nano-avatar__fallback">SM</span>
</div>

<!-- Default: 40px -->
<div class="nano-avatar">
  <span class="nano-avatar__fallback">MD</span>
</div>

<!-- Large: 48px -->
<div class="nano-avatar nano-avatar--lg">
  <span class="nano-avatar__fallback">LG</span>
</div>

<!-- Extra large: 64px -->
<div class="nano-avatar nano-avatar--xl">
  <span class="nano-avatar__fallback">XL</span>
</div>

With Image

<div class="nano-avatar">
  <img class="nano-avatar__image" src="avatar.jpg" alt="User avatar" />
</div>

Status Indicator

<div class="nano-avatar">
  <span class="nano-avatar__fallback">JD</span>
  <span class="nano-avatar__status nano-avatar__status--online"></span>
</div>

<div class="nano-avatar">
  <span class="nano-avatar__fallback">AB</span>
  <span class="nano-avatar__status nano-avatar__status--offline"></span>
</div>

<div class="nano-avatar">
  <span class="nano-avatar__fallback">XY</span>
  <span class="nano-avatar__status nano-avatar__status--busy"></span>
</div>

<!-- CSS-only component, no Stimulus controller required -->