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 human person, just like you.

Use it for an individual with their own Hudl account, whether that’s a coach, athlete or administrator.

Style

The avatar’s style depends on the content available.

Fallback: A single silhouette 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.