Avatar Display
Search the component library

Avatar Display

v1.0.0

This component defines the standard visual style for the output display of an avatar element.

Usage Guidelines

Every instance of a user avatar should come from this component.

Features

  • Circular display shape
  • Large and small display sizes

Dependencies

None

Avatar Shape

Circle

Default Avatar

Photo Avatar

Avatar Size

The avatar display component can be rendered in two sizes.

Large Size

The large size avatar is recommended for use in account detail view pages.

Default Avatar

Photo Avatar

Small Size

The small size avatar is recommended for standard use. This includes student rosters, submissions, communication, and account icons.

Default Avatar

Photo Avatar

Redlines

Large Size

Dimensions
  • Width: 120px
  • Height: 120px
Circle
  • Border Radius: 50%

Small Size

Dimensions
  • Width: 50px
  • Height: 50px
Circle
  • Border Radius: 50%

Changelog

1.0.0

Initial version