Link to Fluid's Microsoft Teams channel Link to the support page

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.

We are undergoing a migration, the following examples might not be up-to-date.

Please refer directly to the Storybook documentation based on your preferred framework.

Storybook documentations

angular logo Angularopen_in_new
react logo Reactopen_in_new
javascript logo Vanillaopen_in_new
angular logo Figmaopen_in_new

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

User profile

Nicolas Jobs

Customer
+4 
<div style="display: flex; flex-wrap: wrap; gap: 16px; background-color: var(--nj-semantic-color-background-neutral-secondary-default); padding: 24px;">
  <div class="nj-avatar nj-avatar--default-icon">
    <p class="nj-sr-only">User profile</p>
  </div>
  <div class="nj-avatar nj-avatar--initials">
    <span class="nj-avatar__initials" aria-hidden="true">NJ</span>
    <p class="nj-sr-only">Nicolas Jobs</p>
  </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

Small avatar

Medium avatar

Large avatar

Extra-large avatar

<div style="display: flex; flex-wrap: wrap; gap: 16px; background-color: var(--nj-semantic-color-background-neutral-secondary-default); padding: 24px;">
    <div class="nj-avatar nj-avatar--initials nj-avatar--sm">
      <span class="nj-avatar__initials" aria-hidden="true">sm</span>
      <p class="nj-sr-only">Small avatar</p>
    </div>

    <div class="nj-avatar nj-avatar--initials">
      <span class="nj-avatar__initials" aria-hidden="true">md</span>
      <p class="nj-sr-only">Medium avatar</p>
    </div>

    <div class="nj-avatar nj-avatar--initials nj-avatar--lg">
      <span class="nj-avatar__initials" aria-hidden="true">lg</span>
      <p class="nj-sr-only">Large avatar</p>
    </div>

    <div class="nj-avatar nj-avatar--initials nj-avatar--xl">
      <span class="nj-avatar__initials" aria-hidden="true">xl</span>
      <p class="nj-sr-only">Extra-large avatar</p>
    </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-semantic-color-background-neutral-secondary-default); padding: 24px;">
  <a href="#" class="nj-avatar nj-avatar--default-icon">
    <span class="nj-sr-only">User profile</span>
  </a>
  <a href="#" class="nj-avatar nj-avatar--initials">
    <span class="nj-avatar__initials" aria-hidden="true">NJ</span>
    <span class="nj-sr-only">Nicolas Jobs</span>
  </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-semantic-color-background-neutral-secondary-default); padding: 24px;">
  <button class="nj-avatar nj-avatar--default-icon nj-avatar--clickable">
    <span class="nj-sr-only">User profile</span>
  </button>
  <button class="nj-avatar nj-avatar--initials nj-avatar--clickable">
    <span class="nj-avatar__initials" aria-hidden="true">NJ</span>
    <span class="nj-sr-only">Nicolas Jobs</span>
  </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.

Nicolas John Doe
Nicolas John Doe

25 notifications

Nicolas John Doe

25 notifications

Nicolas John Doe

25 notifications

<div style="display: flex; flex-wrap: wrap; gap: 16px; background-color: var(--nj-semantic-color-background-neutral-secondary-default); padding: 24px;">
  <div class="nj-avatar nj-avatar--initials nj-avatar--sm">
    <span class="nj-avatar__initials" aria-hidden="true">NJ</span>
    <span class="nj-sr-only">Nicolas John Doe</span>
  </div>

  <div class="nj-avatar nj-avatar--initials">
    <span class="nj-avatar__initials" aria-hidden="true">NJ</span>
    <span class="nj-sr-only">Nicolas John Doe</span>
    <div class="nj-badge nj-badge--information">
      <p>25 <span class="nj-sr-only">notifications</span></p>
    </div>
  </div>

  <div class="nj-avatar nj-avatar--initials nj-avatar--lg">
    <span class="nj-avatar__initials" aria-hidden="true">NJ</span>
    <span class="nj-sr-only">Nicolas John Doe</span>
    <div class="nj-badge nj-badge--information">
      <p>25 <span class="nj-sr-only">notifications</span></p>
    </div>
  </div>

  <div class="nj-avatar nj-avatar--initials nj-avatar--xl">
    <span class="nj-avatar__initials" aria-hidden="true">NJ</span>
    <span class="nj-sr-only">Nicolas John Doe</span>
    <div class="nj-badge nj-badge--information nj-badge--lg">
      <p>25 <span class="nj-sr-only">notifications</span></p>
    </div>
  </div>
</div>

Status

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

User profile
Offline
User profile
Away
User profile
In progress
User profile
Online 
<div style="display: flex; flex-wrap: wrap; gap: 16px; background-color: var(--nj-semantic-color-background-neutral-secondary-default); padding: 24px;">
  <div class="nj-avatar nj-avatar--default-icon nj-avatar--sm">
    <span class="nj-sr-only">User profile</span>
    <div class="nj-status-indicator nj-status-indicator--offline nj-status-indicator--sm">
      <div class="nj-status-indicator__svg">
        <span class="nj-sr-only">Offline</span>
      </div>
    </div>
  </div>

  <div class="nj-avatar nj-avatar--default-icon">
    <span class="nj-sr-only">User profile</span>
    <div class="nj-status-indicator nj-status-indicator--away nj-status-indicator--sm">
      <div class="nj-status-indicator__svg">
        <span class="nj-sr-only">Away</span>
      </div>
    </div>
  </div>

  <div class="nj-avatar nj-avatar--default-icon nj-avatar--lg">
    <span class="nj-sr-only">User profile</span>
    <div class="nj-status-indicator nj-status-indicator--in-progress">
      <div class="nj-status-indicator__svg">
        <span class="nj-sr-only">In progress</span>
      </div>
    </div>
  </div>

  <div class="nj-avatar nj-avatar--default-icon nj-avatar--xl">
    <span class="nj-sr-only">User profile</span>
    <div class="nj-status-indicator nj-status-indicator--online nj-status-indicator--lg">
      <div class="nj-status-indicator__svg">
        <span class="nj-sr-only">Online</span>
      </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.

User profile
User profile
User profile
User profile
User profile
User profile
User profile
User profile 
<div style="display: flex; flex-direction: column; gap: 24px; background-color: var(--nj-semantic-color-background-neutral-secondary-default); padding: 24px;">

  <div class="nj-avatar-list">
    <div class="nj-avatar nj-avatar--default-icon">
      <span class="nj-sr-only">User profile</span>
    </div>
    <div class="nj-avatar nj-avatar--default-icon">
      <span class="nj-sr-only">User profile</span>
    </div>
    <div class="nj-avatar nj-avatar--default-icon">
      <span class="nj-sr-only">User profile</span>
    </div>
    <div class="nj-avatar nj-avatar--default-icon">
      <span class="nj-sr-only">User profile</span>
    </div>
    <button class="nj-avatar nj-avatar--clickable nj-avatar--remaining-count">
      <span aria-hidden="true">+4</span>
      <span class="nj-sr-only">Show 4 more user profiles</span>
    </button>
  </div>

  <div class="nj-avatar-list nj-avatar-list--compact">
    <div class="nj-avatar nj-avatar--default-icon">
      <span class="nj-sr-only">User profile</span>
    </div>
    <div class="nj-avatar nj-avatar--default-icon">
      <span class="nj-sr-only">User profile</span>
    </div>
    <div class="nj-avatar nj-avatar--default-icon">
      <span class="nj-sr-only">User profile</span>
    </div>
    <div class="nj-avatar nj-avatar--default-icon">
      <span class="nj-sr-only">User profile</span>
    </div>
    <button class="nj-avatar nj-avatar--clickable nj-avatar--remaining-count">
      <span aria-hidden="true">+4</span>
      <span class="nj-sr-only">Show 4 more user profiles</span>
    </button>
  </div>

</div>

Autocomplete

Badge