Avatar

Avatars are used to display a person's picture or initials. Avatars may help in creating an emotional connection to the product and in validating that the experience is indeed tailored for the current user.

Example

Avatar comes with a default icon background.

You can use it with:

  • initials (no more than 3 characters)
  • a picture

You can also add:

  • a notification
  • a status indicator
NJ
Customer
+4
<div style="display: flex; flex-wrap: wrap; gap: 16px; background-color: var(--nj-color-background-secondary); padding: 24px;">

  <div class="nj-avatar nj-avatar--default-icon"></div>

  <div class="nj-avatar nj-avatar--initials">
    NJ
  </div>

  <div class="nj-avatar">
    <img class="nj-avatar__picture" src="/assets/img/customer.svg" alt="Customer">
  </div>

  <div class="nj-avatar nj-avatar--remaining-count">
    +4
  </div>

</div>

Size variation

Avatar comes in 4 sizes.

  • nj-avatar--sm
  • nj-avatar--md (default)
  • nj-avatar--lg
  • nj-avatar--xl
sm
md
lg
xl
<div style="display: flex; flex-wrap: wrap; gap: 16px; background-color: var(--nj-color-background-secondary); padding: 24px;">

  <div class="nj-avatar nj-avatar--initials nj-avatar--sm">sm</div>

  <div class="nj-avatar nj-avatar--initials">md</div>

  <div class="nj-avatar nj-avatar--initials nj-avatar--lg">lg</div>

  <div class="nj-avatar nj-avatar--initials nj-avatar--xl">xl</div>

</div>

Using an avatar link will add hover, focus and active states.

<div style="display: flex; flex-wrap: wrap; gap: 16px; background-color: var(--nj-color-background-secondary); padding: 24px;">

  <a href="#" class="nj-avatar nj-avatar--default-icon"></a>

  <a href="#" class="nj-avatar nj-avatar--initials">
    NJ
  </a>

  <a href="#" class="nj-avatar ">
    <img class="nj-avatar__picture" src="/assets/img/customer.svg" alt="Customer">
  </a>

</div>

If you need a clickable avatar without it being a link, use the nj-avatar--clickable modifier.

<div style="display: flex; flex-wrap: wrap; gap: 16px; background-color: var(--nj-color-background-secondary); padding: 24px;">

  <button class="nj-avatar nj-avatar--default-icon nj-avatar--clickable"></button>

  <button class="nj-avatar nj-avatar--initials nj-avatar--clickable">
    NJ
  </button>

  <button class="nj-avatar nj-avatar--clickable">
    <img class="nj-avatar__picture" src="/assets/img/customer.svg" alt="Customer">
  </button>

</div>

Notification

You can add notification with the badge component. See the badge component for more info.

Notification cannot be used on the small avatar.

NJ
NJ
25
NJ
25
NJ
25
<div style="display: flex; flex-wrap: wrap; gap: 16px; background-color: var(--nj-color-background-secondary); padding: 24px;">

  <div class="nj-avatar nj-avatar--initials nj-avatar--sm">
    NJ
  </div>

  <div class="nj-avatar nj-avatar--initials">
    NJ
    <div class="nj-badge">25</div>
  </div>

  <div class="nj-avatar nj-avatar--initials nj-avatar--lg">
    NJ
    <div class="nj-badge">25</div>
  </div>

  <div class="nj-avatar nj-avatar--initials nj-avatar--xl">
    NJ
    <div class="nj-badge nj-badge--lg">25</div>
  </div>

</div>

Status

You can add status information with the status-indicator component. See the status-indicator component for more info.

<div style="display: flex; flex-wrap: wrap; gap: 16px; background-color: var(--nj-color-background-secondary); padding: 24px;">

  <div class="nj-avatar nj-avatar--default-icon nj-avatar--sm">
    <div class="nj-status-indicator nj-status-indicator--offline nj-status-indicator--sm">
      <div class="nj-status-indicator__svg"></div>
    </div>
  </div>

  <div class="nj-avatar nj-avatar--default-icon">
    <div class="nj-status-indicator nj-status-indicator--away nj-status-indicator--sm">
      <div class="nj-status-indicator__svg"></div>
    </div>
  </div>

  <div class="nj-avatar nj-avatar--default-icon nj-avatar--lg">
    <div class="nj-status-indicator nj-status-indicator--in-progress">
      <div class="nj-status-indicator__svg"></div>
    </div>
  </div>

  <div class="nj-avatar nj-avatar--default-icon nj-avatar--xl">
    <div class="nj-status-indicator nj-status-indicator--online nj-status-indicator--lg">
      <div class="nj-status-indicator__svg"></div>
    </div>
  </div>

</div>

Avatar List

You can create an avatar list by wrapping the avatars with the .nj-avatar-list element.

Use the .nj-avatar--remaining-count modifier to display the number of remaining unshown avatars.

Avatar List comes with its compact variation by using the .nj-avatar-list--compact modifier.

+4
+4
<div style="display: flex; flex-direction: column; gap: 24px; background-color: var(--nj-color-background-secondary); padding: 24px;">

  <div class="nj-avatar-list">
    <div class="nj-avatar nj-avatar--default-icon"></div>
    <div class="nj-avatar nj-avatar--default-icon"></div>
    <div class="nj-avatar nj-avatar--default-icon"></div>
    <div class="nj-avatar nj-avatar--default-icon"></div>
    <div class="nj-avatar nj-avatar--clickable nj-avatar--remaining-count" tabindex="0">
      +4
    </div>
  </div>

  <div class="nj-avatar-list nj-avatar-list--compact">
    <div class="nj-avatar nj-avatar--default-icon"></div>
    <div class="nj-avatar nj-avatar--default-icon"></div>
    <div class="nj-avatar nj-avatar--default-icon"></div>
    <div class="nj-avatar nj-avatar--default-icon"></div>
    <div class="nj-avatar nj-avatar--clickable nj-avatar--remaining-count" tabindex="0">
      +4
    </div>
  </div>

</div>