warning

Hey there! This is the Uniform version 3 documentation site. If you’re looking for version 4, go here instead.

logomark

Components

February 2020 Release

/

Team Avatar

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 the group for which a user competes.

Use team avatars to represent the most important group of people in Hudl—the team.

Style

The avatar’s style depends on the content available.

othersport

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.

othersport

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.

othersport

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.
No guidelines exist for Windows (yet).