The Avatar component represents a user’s identity in the UI.
It is used in the global navigation’s user menu and may also be used to indicate ownership of user generated content such as a discussion post or open response submission.
Basic Usage
Show editable code example
Any Paragon component or export may be added to the code example.
Huge
Show editable code example
Any Paragon component or export may be added to the code example.
Theme Variables (SCSS)#
$avatar-border-radius: 100% !default;$avatar-border: solid 1px $light-300 !default;$avatar-size-xs: 1.5rem !default;$avatar-size-sm: 2.25rem !default;$avatar-size: 3rem !default;$avatar-size-lg: 4rem !default;$avatar-size-xl: 6rem !default;$avatar-size-xxl: 11.5rem !default;$avatar-size-huge: 18.75rem !default;
Props API#
Avatar Props API
- alt
string
Default''Alt text. Usually the user's name
- size
enum
'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'huge'Default'md'Size of the avatar
- src
string
Image src of the avatar image
Usage Insights#
Avatar
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-discussions | 22.7.0 | 5 | |
frontend-component-header-edx | 21.11.4 | 2 | |
frontend-component-header | 22.8.1 | 1 | |
prospectus | 20.46.2 | 1 |