Avatars
Avatars are used to quickly identify users or teams.
| 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. |
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
|
|
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>