The Avatar component represents a user’s identity in the UI.

Contributors

Ange Romanska (Deactivated) Adam Butterworth (Deactivated)

Relate Jira Tickets

https://openedx.atlassian.net/browse/PAR-137 https://openedx.atlassian.net/browse/PAR-132 https://openedx.atlassian.net/browse/PAR-137 https://openedx.atlassian.net/browse/TNL-7741

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=1105%3A815

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=1105%3A798

(blue star) Resources

(blue star) Use cases

The Avatar is used in the global navigation’s user menu. It may also be used to indicate ownership of user generated content such as a discussion post or open response submission.

(blue star) Variants

Variant

Size

  • Default

  • Small

  • Extra Small

  • Huge

(blue star) Best Practices

The dos and don’ts of this component. What should be kept in mind when using this component?

(blue star) Related Components

AvatarButton

(blue star) Specification

What does an engineer need to know in order to build this component?

(blue star) Anatomy

Legend

There is no border on the avatar component, it is a simple circular mask.

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=1105%3A907

(blue star) Behaviors

This component has no interactive behaviors

(blue star) Accessibility

Focus Management Expectations




Semantics