Sections

Avatars

Avatars are used to quickly identify users or teams.

Classes

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

Examples

Section titled Examples

Users

Section titled Users

Including an image with the class s-avatar--image within s-avatar will apply the correct size and border radius. 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>
16px default
24px .s-avatar__24
32px .s-avatar__32
48px .s-avatar__48
64px .s-avatar__64
96px .s-avatar__96
128px .s-avatar__128

Teams

Section titled Teams

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 team 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">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">H</div>
    @Svg.ShieldXSm.With("native s-avatar--badge")
</a>

<a href="…" class="s-avatar s-avatar__32">
    <div class="s-avatar--letter">H</div>
    @Svg.ShieldXSm.With("native s-avatar--badge")
</a>

<a href="…" class="s-avatar s-avatar__48">
    <div class="s-avatar--letter">H</div>
    @Svg.ShieldXSm.With("native s-avatar--badge")
</a>

<a href="…" class="s-avatar s-avatar__64">
    <div class="s-avatar--letter">H</div>
    @Svg.ShieldXSm.With("native s-avatar--badge")
</a>

<a href="…" class="s-avatar s-avatar__96">
    <div class="s-avatar--letter">H</div>
    @Svg.ShieldXSm.With("native s-avatar--badge")
</a>

<a href="…" class="s-avatar s-avatar__128">
    <div class="s-avatar--letter">H</div>
    @Svg.ShieldXSm.With("native s-avatar--badge")
</a>
16px default
H
Hum
H
Hum
Hum
24px .s-avatar__24
H
H
32px .s-avatar__32
H
H
48px .s-avatar__48
H
H
64px .s-avatar__64
H
H
96px .s-avatar__96
H
H
128px .s-avatar__128
H
H
Edit on GitHub