Components

Design
Code
keyboardshortcuts
d
Design
c
Code
,
Previous Section
.
Next Section
/
Toggle Preview Environment
[
Previous Platform
]
Next Platform
command +
Scroll to Top
command +
Scroll to Bottom

Represent a number of individuals within a team.

Use the group avatar to compactly represent a subset of teammates. Depending on the context, a group can be any mix of coaches, athletes and administrators.

Style

The avatar’s style depends on the content available.

Fallback: A basic silhouette when no count or color is available.

Sizes

Consider layout density and view hierarchy when choosing an avatar’s size.

Custom Sizes

There are some cases when an additional size may be necessary and a custom size can be used. The only custom size currently available (for arguably the biggest use case) is profile.

Profile

Usage

Borders

avatar-borders-dont

Don'tadd borders where several avatars appear together.

avatar-borders-do

Douse a border to ground an avatar in a spacious area.

Linked Avatars

Don’t give the avatar a link that doesn’t make sense, like pizzahut.com. The user avatar should go to a user’s profile, not the team’s, and vice versa.

Platforms

platformnotes
Web
  • Stick to the guidelines above.
Apple
  • Stick to the guidelines above.
Android
  • Stick to the guidelines above.