Avatar
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
Huge
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;
Avatar Props API
- alt
stringDefault''Alt text. Usually the user's name
- size
enum'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'huge'Default'md'Size of the avatar
- src
stringImage src of the avatar image