Avatars

Avatars are graphic representations of individuals or groups on Hudl. Avatars make identifying a person, team, organization or group more efficient. Avatars also allow for self-expression.


Types

There are four types of avatars: User (athletes, coaches, etc.), Team, Organization and Group.

Avatar Types


Avatars without Images

Avatars without images use graphics determined by their type. If available, the organization’s primary and secondary colors are inherited to users, teams and groups.

These colors are evaluated as the Avatar is composed for ideal display and contrast.

Avatar Color

The Avatar component does the work of choosing appropriate colors. It is highly recommended to use the Avatar component.

Avatar Color Issues


Sizes

Avatars have five basic size options: X-Small, Small, Medium, Large and X-Large. Size should be chosen considering layout density and view hierarchy.

Avatar Sizes

Each Avatar is positioned inside a bounding box to allow clearance for a border. Bounding boxes are based on a 16px sizing scale.


Custom Sizes

A range of Avatar sizes exist to work for most situations. However, in unique cases, an additional Avatar size may be necessary. There is currently one custom size: Profile.

Avatar Sizes


Border

An Avatar border is an optional flourish that can be used to add visual interest. Borders should not be used for busy interfaces, such as dense lists.

Avatar Border


Linked Avatars

On hover, linked Avatars have a border. Unless the context suggests otherwise, most Avatars should be linked to the profile view of the respective Avatar.

Avatar Hover


Implementation

Because of the Avatar’s complexity, it is recommended to use the React Avatar component. A React Native version of this component is coming soon.

Documentation of the CSS is available in the UI CSS library.


Uniform UI Elements

A Sketch file with with UI elements used to design Hudl interfaces.