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 school, governing body or brand.

Use the org avatar to identify the parent organization of a group of teams. These avatars help users distinguish teams spanning multiple sports or levels.

Style

The avatar’s style depends on the content available.

Fallback: A pennant icon appears when no image, color or name 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.