Avatars

Avatars are used to quickly identify users or teams.

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

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

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

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