Skip to content

Components / Avatar

Avatar

Displaying the full name of a person in an interface can take up way more space than needed and can disrupt rhythm. Use avatars in place of a user’s name (but include the name in content readable by assistive technology).

Structure

Elements

  1. Container
  2. Image
Do
A best practice would be to include a tooltip on the avatar.

Variations

Size

Fixed sizes are available to provide consistency across layouts.

Size Dimensions (square)
Extra small 24 px
Small 36 px
Medium 48 px
Large 72 px
Extra large 96 px

Profile

When part of the page hierarchy, give the avatar a visual boost by adding a shadow.

Badge

Sometimes you need to dress up an avatar with a little bling. Common examples would be an online/offline indicator or a descriptive icon.

Stacked

To display a horizontal row of avatars, use the stacked avatar component.

Style

Style specifications are available to inspect via Abstract. The following link will take you to their web-based interface.

Inspect component

Theming

The following table lists the theme properties used to style this component and any variations as well as a sample value.

A full list of properties used within the design system—as well as general usage guidelines—is available on the Theme properties page.

Examples of each theme property may be referenced by clicking a property name in the “property” column.

Sample Property Sample value
bodyTextSecondaryColor

Medium dark text color used for secondary or muted content in layouts

#64707DFF
secondaryContentBackgroundColor

#DEE4ECFF
© 2020 Jack Henry & Associates, Inc. Trademark notice
Version 2.0.0-beta.5.1. Last updated December 16, 2020.