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>

Hum