Avatars

Ask a question Design guidelines

Summary

Avatars are used to add a human touch and instant clarity when understanding which user did what in the application. We also use avatars for projects, repositories, spaces and other container metaphors within Atlassian Apps.

Status

API status: general
Web resource key: com.atlassian.auiplugin:aui-avatar
AMD Module key: N/A
Experimental API: 5
General API: 5.1

Examples

User Avatar User Avatar User Avatar User Avatar User Avatar Project Avatar Project Avatar Project Avatar Project Avatar Project Avatar

Variations

User avatars

Demo code
Result
Person McRealface
AخA
 
<span class="aui-avatar aui-avatar-xxlarge">
    <span class="aui-avatar-inner">
        <img src="images/avatar-person.svg" alt="Person McRealface" />
    </span>
</span>

Project avatars

Avatars can be used for "container" objects — projects, spaces, repositories, etcetera — to give them a recognisable visual identity.

Demo code
Result
My super awesome project
 
<span class="aui-avatar aui-avatar-project aui-avatar-xlarge">
    <span class="aui-avatar-inner">
        <img src="images/avatar-project.svg" alt="My super awesome project" />
    </span>
</span>

Behaviour

Textual descriptions of avatars

An avatar must include a textual description of the concept it represents, so that its meaning can be conveyed and understood in non-visual contexts as well.

  • In most cases, the avatar's <img> tag should include an alt attribute describing the image.
  • In cases where the avatar is logically grouped with text content that describes the concept (for example, in a page header), the avatar is effectively decorative. In such cases, you should provide an empty alt attribute description.
Demo code
Result

My super awesome project

The avatar is related to this heading. If I were using a screen reader here, it would be redundant to hear the name of the project read out twice. So, we prevent the image from being described.

 
<header class="aui-page-header">
    <div class="aui-page-header-inner">
        <div class="aui-page-header-image">
            <span class="aui-avatar aui-avatar-project aui-avatar-xxxlarge">
                <span class="aui-avatar-inner">
                    <img src="images/avatar-project.svg" alt="" role="presentation" />
                </span>
            </span>
        </div>
        <div class="aui-page-header-main">
            <h2>My super awesome project</h2>
            <p>
                The avatar is related to this heading. If I were using a screen reader here,
                it would be redundant to hear the name of the project read out twice. So,
                we prevent the image from being described.
            </p>
        </div>
    </div>
</header>

Badged content

Avatars may have a single additional element overlaid in one of their four corners.

Use badged content to represent the type, permission, presence, or other contextually relevant information about the user or container.

The badged content must also include a textual description of the information it represents, so that its meaning can be conveyed and understood in non-visual contexts as well.

Demo code
Result
Person McRealface Online
 
<span class="aui-avatar aui-avatar-xxlarge">
    <span class="aui-avatar-inner">
        <img src="images/avatar-person.svg" alt="Person McRealface" />
    </span>
    <span class="custom-presence-indicator">
        <svg height="100%" version="1.1" viewBox="0 0 8 8" width="100%" xmlns="http://www.w3.org/2000/svg">
            <description>Online</description>
            <circle cx="4" cy="4" r="4"></circle>
        </svg>
    </span>
</span>
 
.aui-avatar .custom-presence-indicator {
    /* position the indicator. AUI Avatars are a relative container. */
    position: absolute;
    bottom: 0;
    right: 0;
    /* size the indicator appropriately. content should not appear outside the indicator. */
    width: 16px;
    height: 16px;
    overflow: hidden;
    /* style the indicator. */
    color: #00875A;
    border: 3px solid #fff;
    border-radius: 100%;
    fill: #00875A;
}