Avatar

Avatar и Identity показывают пользователя, команду, сервис или объект с initials, icon, image и status marker.

Avatar variants

AV GN UI

Identity row

AK Alex Kim Product Designer

Avatar stack

AK JS MR +4

Avatar HTML

<span class="avatar avatar-secondary is-online">
  AK
  <span class="avatar-status"></span>
</span>

<span class="avatar avatar-outline">
  <i class="ph ph-user"></i>
</span>

<span class="avatar">
  <img src="/assets/imgs/gnexus-mark.svg" alt="GNexus mark">
</span>

Identity HTML

<div class="identity">
  <span class="avatar avatar-secondary is-online">
    AK
    <span class="avatar-status"></span>
  </span>
  <span class="identity-content">
    <span class="identity-title">Alex Kim</span>
    <span class="identity-meta">Product Designer</span>
  </span>
</div>

Avatar Stack HTML

<div class="avatar-stack" aria-label="Assigned users">
  <span class="avatar avatar-sm">AK</span>
  <span class="avatar avatar-sm avatar-secondary">JS</span>
  <span class="avatar avatar-sm avatar-warning">MR</span>
  <span class="avatar-stack-count">+4</span>
</div>