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.
There are four types of avatars: User (athletes, coaches, etc.), Team, Organization and Group.
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.
The Avatar component does the work of choosing appropriate colors. It is highly recommended to use the Avatar component.
Avatars have five basic size options: X-Small, Small, Medium, Large and X-Large. Size should be chosen considering layout density and view hierarchy.
Each Avatar is positioned inside a bounding box to allow clearance for a border. Bounding boxes are based on a 16px sizing scale.
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.
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.
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.
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.
A Sketch file with with UI elements used to design Hudl interfaces.