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.

If you use generic avatars as placeholders, make sure the contrast between the avatar and the background is optimal to improve visibility.

Example

Avatar can be used with a picture and a notification. You can also add a name under with a bit of utilities class. If you dont have a picture, there is a default background.

NJ
Woman
Woman
<div class="d-flex">
  <div class="nj-avatar">
    <div class="nj-avatar__picture"></div>
  </div>
  <div class="nj-avatar">
    <div class="nj-avatar__picture">
      <div class="nj-avatar__initials">NJ</div>
    </div>
  </div>
  <div class="nj-avatar">
    <div class="nj-avatar__picture">
      <img src="/assets/img/customer.svg" alt="Woman">
    </div>
  </div>
  <div class="nj-avatar">
    <div class="nj-avatar__picture">
      <img src="/assets/img/woman.jpg" alt="Woman">
    </div>
  </div>
</div>

Size variation

Avatar has two other sizes.

  • nj-avatar--sm
  • nj-avatar--lg
NJ
NJ
NJ
<div class="d-flex flex-wrap">
  <div class="nj-avatar nj-avatar--sm">
    <div class="nj-avatar__picture"></div>
  </div>
  <div class="nj-avatar nj-avatar--sm">
    <div class="nj-avatar__picture">
      <div class="nj-avatar__initials">NJ</div>
    </div>
  </div>
  <div class="nj-avatar">
    <div class="nj-avatar__picture"></div>
  </div>
  <div class="nj-avatar">
    <div class="nj-avatar__picture">
      <div class="nj-avatar__initials">NJ</div>
    </div>
  </div>
  <div class="nj-avatar nj-avatar--lg">
    <div class="nj-avatar__picture"></div>
  </div>
  <div class="nj-avatar nj-avatar--lg">
    <div class="nj-avatar__picture">
      <div class="nj-avatar__initials">NJ</div>
    </div>
  </div>
</div>

Using a link on avatar will add a border on hover.

<div class="d-flex flex-wrap">
  <a href="#" class="nj-avatar">
    <div class="nj-avatar__picture"></div>
  </a>
  <a href="#" class="nj-avatar">
    <div class="nj-avatar__picture">
      <div class="nj-avatar__initials">NJ</div>
    </div>
  </a>
  <a href="#" class="nj-avatar">
    <div class="nj-avatar__picture"><img src="/assets/img/customer.svg" alt="Woman"></div>
  </a>
  <a href="#" class="nj-avatar">
      <div class="nj-avatar__picture"><img src="/assets/img/woman.jpg" alt="Woman"></div>
    </a>
</div>

Notification

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

75
2
4
<div class="d-flex flex-wrap">
  <div class="nj-avatar nj-avatar--sm">
    <div class="nj-avatar__picture"></div>
    <div class="nj-badge nj-badge--cerise">75</div>
  </div>
  <div class="nj-avatar">
    <div class="nj-avatar__picture"></div>
    <div class="nj-badge nj-badge--orange">2</div>
  </div>
  <div class="nj-avatar nj-avatar--lg">
    <div class="nj-avatar__picture"></div>
    <div class="nj-badge nj-badge--red">4</div>
  </div>
</div>