Avatar

Avatars are used to display a person's picture or initials.

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>

Status

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

Online


Away


Offline

<h4>Online</h4>
<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--success"></div>
  </div>
  <div class="nj-avatar">
    <div class="nj-avatar__picture"></div>
    <div class="nj-badge nj-badge--success"></div>
  </div>
  <div class="nj-avatar nj-avatar--lg">
    <div class="nj-avatar__picture"></div>
    <div class="nj-badge nj-badge--success"></div>
  </div>
</div><br>
<h4>Away</h4>
<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--warning"></div>
  </div>
  <div class="nj-avatar">
    <div class="nj-avatar__picture"></div>
    <div class="nj-badge nj-badge--warning"></div>
  </div>
  <div class="nj-avatar nj-avatar--lg">
    <div class="nj-avatar__picture"></div>
    <div class="nj-badge nj-badge--warning"></div>
  </div>
</div><br>
<h4>Offline</h4>
<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--danger"></div>
  </div>
  <div class="nj-avatar">
    <div class="nj-avatar__picture"></div>
    <div class="nj-badge nj-badge--danger"></div>
  </div>
  <div class="nj-avatar nj-avatar--lg">
    <div class="nj-avatar__picture"></div>
    <div class="nj-badge nj-badge--danger"></div>
  </div>
</div>