/
Avatar

Avatar

DESIGN COMPLETE IMPLEMENTED

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

1 Resources | 2 Use cases | 3 Variants | 4 Best Practices | 5 Related Components | 6 Specification | 6.1 Anatomy | 6.2 Behaviors | 6.3 Accessibility

 

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

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

Resources

 

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.

Variants

Variant

 

Variant

 

Size

  • Default

  • Small

  • Extra Small

  • Huge

Best Practices

Related Components

https://openedx.atlassian.net/wiki/spaces/BPL/pages/2102821019

Specification

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

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

Behaviors

This component has no interactive behaviors

Accessibility

Focus Management Expectations




Semantics