Avatars
Search the component library

Avatars

v1.0.1

An avatar is an icon or image used to represent a user on the screen. Use this component for every instance of a user avatar.

Note: There isn't a coded component associated with this design pattern.

Shape

Circle

Default Avatar

Photo 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.

Large avatar

Default Avatar

Photo Avatar

Small size

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

Small avatar

Default Avatar

Photo Avatar

Redlines

Large size

DimensionsWidth: 120px
Height: 120px
CircleBorder Radius: 50%

Small size

DimensionsWidth: 50px
Height: 50px
CircleBorder Radius: 50%

Changelog

1.0.1

  • ADDED: Add feature links

1.0.0

Initial version