Avatar

Circular or square containers for user photos or initials. Five sizes from --xs (24px) to --xl (64px), all on the 8px grid. An optional status dot indicates online, away, or busy state.

Sizes

<div class="d-flex align-items-center gap-2">
  <div class="ln-avatar ln-avatar--xs">
    <span class="ln-avatar__initials">XS</span>
  </div>
  <div class="ln-avatar ln-avatar--sm">
    <span class="ln-avatar__initials">SM</span>
  </div>
  <div class="ln-avatar">
    <span class="ln-avatar__initials">MD</span>
  </div>
  <div class="ln-avatar ln-avatar--lg">
    <span class="ln-avatar__initials">LG</span>
  </div>
  <div class="ln-avatar ln-avatar--xl">
    <span class="ln-avatar__initials">XL</span>
  </div>
</div>

Status indicator

<div class="d-flex align-items-center gap-3">
  <div class="ln-avatar ln-avatar--lg">
    <span class="ln-avatar__initials">AV</span>
    <span class="ln-avatar__status"></span>
  </div>
  <div class="ln-avatar ln-avatar--lg">
    <span class="ln-avatar__initials">BZ</span>
    <span class="ln-avatar__status ln-avatar__status--danger"></span>
  </div>
</div>

Avatar group

<div class="ln-avatar-group">
  <div class="ln-avatar"><span class="ln-avatar__initials">AB</span></div>
  <div class="ln-avatar"><span class="ln-avatar__initials">CD</span></div>
  <div class="ln-avatar"><span class="ln-avatar__initials">EF</span></div>
  <span class="ln-avatar-group__more">+3</span>
</div>

Reference

Class	Description	Responsive
`.ln-avatar`	Avatar container (40px default)	No
`.ln-avatar__img`	Photo image element	No
`.ln-avatar__initials`	Letter initials fallback	No
`.ln-avatar__status`	Status indicator dot	No
`.ln-avatar__status--success`	Green status	No
`.ln-avatar__status--warning`	Yellow status	No
`.ln-avatar__status--danger`	Red status	No
`.ln-avatar__status--neutral`	Grey status	No
`.ln-avatar--xs`	24px size	No
`.ln-avatar--sm`	32px size	No
`.ln-avatar--md`	40px size (default)	No
`.ln-avatar--lg`	48px size	No
`.ln-avatar--xl`	64px size	No
`.ln-avatar--square`	Rounded-square shape	No
`.ln-avatar-group`	Overlapping avatar row	No
`.ln-avatar-group__more`	Overflow count indicator	No
`.ln-avatar-group--spread`	Remove overlap between avatars	No