Avatars

Avatars are used to quickly identify users or teams.

Classes

Class	Description	Parent	Modifies
`.s-avatar`	The base avatar at 16px.	N/A	N/A
`.s-avatar--image`	A child element for displaying a user's profile image.	`.s-avatar`	N/A
`.s-avatar--letter`	A child element for displaying an abbreviated Team name.	`.s-avatar`	N/A
`.s-avatar--badge`	A child element that provides positioning to the shield on Team avatars.	`.s-avatar`	N/A
`.s-avatar--indicator`	A child element that provides positioning to the activity indicator on user's avatars.	`.s-avatar`	N/A
`.s-avatar__24`	Adds the proper border radius and scaling at 24px.	N/A	`.s-avatar`
`.s-avatar__32`	Adds the proper border radius and scaling at 32px.	N/A	`.s-avatar`
`.s-avatar__48`	Adds the proper border radius and scaling at 48px.	N/A	`.s-avatar`
`.s-avatar__64`	Adds the proper border radius and scaling at 64px.	N/A	`.s-avatar`
`.s-avatar__96`	Adds the proper border radius and scaling at 96px.	N/A	`.s-avatar`
`.s-avatar__128`	Adds the proper border radius and scaling at 128px.	N/A	`.s-avatar`

Examples

Users

Including an image with the class s-avatar--image within s-avatar will apply the correct size. Remember, you’ll want to double the size of the avatar image to account for retina screens.

<a href="…" class="s-avatar">
    <img class="s-avatar--image" src="https://picsum.photos/32" />
</a>

<a href="…" class="s-avatar s-avatar__24">
    <img class="s-avatar--image" src="https://picsum.photos/48" />
</a>

<a href="…" class="s-avatar s-avatar__32">
    <img class="s-avatar--image" src="https://picsum.photos/64" />
</a>

<a href="…" class="s-avatar s-avatar__48">
    <img class="s-avatar--image" src="https://picsum.photos/96" />
</a>

<a href="…" class="s-avatar s-avatar__64">
    <img class="s-avatar--image" src="https://picsum.photos/128" />
</a>

<a href="…" class="s-avatar s-avatar__96">
    <img class="s-avatar--image" src="https://picsum.photos/192" />
</a>

<a href="…" class="s-avatar s-avatar__128">
    <img class="s-avatar--image" src="https://picsum.photos/256" />
</a>

Size	Class	Example
`16px`	`.s-avatar`	Example user
`24px`	`.s-avatar__24`	Example user
`32px`	`.s-avatar__32`	Example user
`48px`	`.s-avatar__48`	Example user
`64px`	`.s-avatar__64`	Example user
`96px`	`.s-avatar__96`	Example user
`128px`	`.s-avatar__128`	Example user

Activity

Avatars can display activity indicators to show activities or status changes. Add the s-avatar--indicator class to a child element of s-avatar along with s-activity-indicator and s-activity-indicator__sm classes. The indicator is positioned at the top-right corner of the avatar.

<a href="…" class="s-avatar">
    <div class="s-avatar--indicator s-activity-indicator s-activity-indicator__sm s-activity-indicator__success">
        <div class="v-visible-sr">Online</div>
    </div>
    <img class="s-avatar--image" src="https://picsum.photos/32" />
</a>

<a href="…" class="s-avatar s-avatar__24">
    <div class="s-avatar--indicator s-activity-indicator s-activity-indicator__sm s-activity-indicator__success">
        <div class="v-visible-sr">Online</div>
    </div>
    <img class="s-avatar--image" src="https://picsum.photos/48" />
</a>

Size	Class	Example
`16px`	`.s-avatar`	Example user Online
`24px`	`.s-avatar__24`	Example user Online

Stack Internal

When displaying a team’s identity, we badge the avatar with a shield. We fall back to the first letter of their name and a color we choose at random. As Stack Internal administrators add more data—choosing a color or uploading an avatar—we progressively enhance the avatar.

In this example, from left to right, we have a team name of Hum with no avatar or custom color. In the middle we have a team name of Hum with a custom color. In the last example, we have a team name of Hum with a custom avatar applied.

<a href="…" class="s-link s-link__muted">
    <div class="s-avatar">
        <div class="s-avatar--letter" aria-hidden="true">H</div>
        @Svg.ShieldXSm.With("native s-avatar--badge")
    </div>
    <span class="pl4">Team name</span>
</a>

<a href="…" class="s-avatar s-avatar__24">
    <div class="s-avatar--letter" aria-hidden="true">H</div>
    <span class="v-visible-sr">Hum</span>
    @Svg.ShieldXSm.With("native s-avatar--badge")
</a>

<a href="…" class="s-avatar s-avatar__32">
    <div class="s-avatar--letter" aria-hidden="true">H</div>
    <span class="v-visible-sr">Hum</span>
    @Svg.ShieldXSm.With("native s-avatar--badge")
</a>

<a href="…" class="s-avatar s-avatar__48">
    <div class="s-avatar--letter" aria-hidden="true">H</div>
    <span class="v-visible-sr">Hum</span>
    @Svg.ShieldXSm.With("native s-avatar--badge")
</a>

<a href="…" class="s-avatar s-avatar__64">
    <div class="s-avatar--letter" aria-hidden="true">H</div>
    <span class="v-visible-sr">Hum</span>
    @Svg.ShieldXSm.With("native s-avatar--badge")
</a>

<a href="…" class="s-avatar s-avatar__96">
    <div class="s-avatar--letter" aria-hidden="true">H</div>
    <span class="v-visible-sr">Hum</span>
    @Svg.ShieldXSm.With("native s-avatar--badge")
</a>

<a href="…" class="s-avatar s-avatar__128">
    <div class="s-avatar--letter" aria-hidden="true">H</div>
    <span class="v-visible-sr">Hum</span>
    @Svg.ShieldXSm.With("native s-avatar--badge")
</a>

Size	Class	Custom color	Brand color	Custom avatar
`16px`	`.s-avatar`	Hum	Hum	Hum
`24px`	`.s-avatar__24`	Hum	Hum	Hum
`32px`	`.s-avatar__32`	Hum	Hum	Hum
`48px`	`.s-avatar__48`	Hum	Hum	Hum
`64px`	`.s-avatar__64`	Hum	Hum	Hum
`96px`	`.s-avatar__96`	Hum	Hum	Hum
`128px`	`.s-avatar__128`	Hum	Hum	Hum