Avatar

General Guidelines

A critical element in elevating the user experience is personalization. An avatar personalizes a user’s experience and allows the user to immediately recognize an account or item. Avatars have the added benefit of being a security check for the user - one can immediately see they are not logged into the correct account if a different image appears. An avatar can be edited and a user’s own image may be uploaded. There is a default icon in place if the user has not uploaded an image.

Examples

Do’s and Don’ts

Do use a default icon or initials

Do allow users to edit in a settings page (not editable everywhere avatar is seen)

Don't make the default a negative

States & Decorators

Color and Typography

With Other Components

Examples

For details on when to use this component, see the Usage tab.

<div class="iris-avatar" data-size="small">
    <div class="iris-avatar__inner">
        <img class="iris-avatar__image" alt="Avatar" src="URL" />
    </div>
</div>

States

The states for this component are as follows:

Editible

The editible state requires adding the button component to the markup.

<div class="iris-avatar iris-avatar--editible" data-size="small">
    <div class="iris-avatar__inner">
        <img class="iris-avatar__image" alt="Avatar" src="URL" />
    </div>

    <button class="iris-avatar__edit-button iris-button iris-button--ghost" aria-label="Edit Avatar">
        <span class="iris-button__icon font-icon-pencil"></span>
    </button>
</div>

Decorators

The avatar component requires a size decorator be used. The decorators of this component are as follows:

Extra Small (20x20)

<div class="iris-avatar" data-size="xsmall">
    <div class="iris-avatar__inner">
        <img class="iris-avatar__image" alt="Avatar" src="URL" />
    </div>
</div>

Small (40x40)

<div class="iris-avatar" data-size="small">
    <div class="iris-avatar__inner">
        <img class="iris-avatar__image" alt="Avatar" src="URL" />
    </div>
</div>

Medium (50x50)

<div class="iris-avatar" data-size="medium">
    <div class="iris-avatar__inner">
        <img class="iris-avatar__image" alt="Avatar" src="URL" />
    </div>
</div>

Large (60x60)

<div class="iris-avatar" data-size="large">
    <div class="iris-avatar__inner">
        <img class="iris-avatar__image" alt="Avatar" src="URL" />
    </div>
</div>

Extra Large (80x80)

<div class="iris-avatar" data-size="xlarge">
    <div class="iris-avatar__inner">
        <img class="iris-avatar__image" alt="Avatar" src="URL" />
    </div>
</div>

Other Uses

With an icon

You can use the avatar with an icon instead of an image.

<div class="iris-avatar" data-size="small">
    <div class="iris-avatar__inner">
        <span class="iris-avatar__icon font-icon-house" role="img" aria-label="Home mortgage rates"></span>
    </div>
</div>

With initials

You can use the avatar with an initials instead of an image.

<div class="iris-avatar" data-size="small" role="img" aria-label="Luke Skywalker">
    <div class="iris-avatar__inner">
        <span class="iris-avatar__text">LS</span>
    </div>
</div>

Notification

Decorate an avatar with a badge to indicate a status or notification.

<div class="iris-avatar pos--relative" data-size="large">
    <div class="iris-avatar__inner">
        <img class="iris-avatar__image" alt="Avatar" src="URL" />
    </div>
    <div class="iris-badge iris-badge--circular iris-badge--info" data-position="top-right" role="img" aria-label="New message notification"></div>
</div>
<div class="iris-avatar pos--relative" data-size="large">
    <div class="iris-avatar__inner">
        <img class="iris-avatar__image" alt="Avatar" src="URL" />
    </div>
    <div class="iris-badge iris-badge--circular iris-badge--info" data-position="bottom-left" role="img" aria-label="Business user">
        <div class="iris-badge__content">
            <span class="font-icon-business"></span>
        </div>
    </div>
</div>

Accessibility

As always, we want all of the components in the application to be accessible. Please keep the following notes in mind while using this component:

• When using an image put an alt attribute on the <img> tag.
• Do not use the word "image" in the alt text as this will be added by the screenreader.
• When using an icon put an aria-label on the icon to describe the intent of the icon.

Variables

The variables used in this component are as follows:

// Border variables
$avatar-border-radius: 100% !default;

// Icon variables
$avatar-icon-size-xsmall: 1rem !default;
$avatar-icon-size-small: 1.6rem !default;
$avatar-icon-size-medium: 2.5rem !default;
$avatar-icon-size-large: 3rem !default;
$avatar-icon-size-xlarge: 4rem !default;

// Text variables
$avatar-text-size-xsmall: 1rem !default;
$avatar-text-size-small: 1.6rem !default;
$avatar-text-size-medium: 2rem !default;
$avatar-text-size-large: 2.4rem !default;
$avatar-text-size-xlarge: 3.2rem !default;

$avatar-font-weight: 700 !default;

Themeability

The background color of the avatar when using an icon instead of an image is themeable using the _avatar.scss theme overides file. The variables accessible in that file are as follows:

// Background variables
$avatar-background: $primary-color !default;

// Text variables
$avatar-icon-color: #FFFFFF !default;