Skip to content

Avatar13.10.5

An avatar is a graphical representation of a user and typically appears in list and card views, along side a user's information and/or content that they have created


$ npm i @if-design-system/Avatar@13.10.5

Edit this section

Avatar

An avatar is a graphical representation of a user and typically appears in list and card views, along side a user's information and/or content that they have created.

An avatar can either be a profile picture, a default profile placeholder or initials with background color.

They come in a variety of sizes. The size of an avatar varies depending upon the element it resides in as well as the size of the viewport.

Edit this section

Usage

Principles

  • Where possible, link the avatar to details about the individual or group it represents:
    • Where appropriate, link the avatar to a context-specific view of that individual or group. Otherwise, link to their canonical "profile" page.
    • Don't link the avatar while it's shown on the individual's canonical "profile" page.
  • When there is no personal photo to show, use initials:
    • Because personal names differ around the world, consider avoiding using initials that may not represent an individual accurately. You might show their full name instead.
    • We tend to use the first letter of each space-separated word for initials and capitalize them. You may need to resize the initials text for more than 3 names.
  • When there is no specific individual or group identified, use the default user avatar.
  • Loading:
    • If an image fails to load, fall back to the default user avatar.
  • Use an avatar to help people efficiently identify another person in the application visually.
  • Use an avatar to distinguish people with the same name.
  • Avoid an avatar when most people or groups won't have an image to show.

Sizing

Avatars comes in different sizes.

Default

Small

Large

Larger

Largest

Edit this section

Variations

Type Purpose
Default The default avatar contains a default avatar profile.
Headshot The default avatar contains a profile picture of a person.
Initials The default avatar contains initials of the person.
Edit this section

Default

The default avatar is a fallback avatar used when a profile picture is not uploaded, or when the user is anonymous.

<span class="if avatar default"></span>
Edit this section

Headshot

The headshot version is an avatar with a profile picture of a person.

<span class="if avatar largest" style="background-image: url(https://thispersondoesnotexist.com/image);"></span>
Edit this section

Initials

The initials avatar is a fallback avatar used when a profile picture could not be fetched, or when it is not natural to have a headshot.

<span class="if avatar largest yellow" data-initials="DD"></span>
Edit this section

Behaviours

Interactions

Focus

3px box-shadow with color BL 1, BLUE Complement, a direct complement color of BL 1, BLUE.

Modifiers

Stacked

If needed, you can wrap several avatars with .if.stacked to stack them up:

Stacked
Edit this section

Implementation

<div class="if avatar [default] [large|largest]"></div>

All images in avatars are either machine learning generated from https://thispersondoesnotexist.com/, or of people that has granted the use of their image.

Edit this section

Contact us