Examples
Props
Avatar
| Name | Type | Default | Description |
|---|---|---|---|
| altrequired | string | Attribute that specifies the alternate text of the image for the avatar. | |
| className | string | Additional classes added to the avatar. | |
| isBordered | boolean | Flag to indicate the avatar should have a border. | |
| size | 'sm' | 'md' | 'lg' | 'xl' | Size variant of avatar. | |
| src | string | '' | Attribute that specifies the URL of the image for the avatar. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v6-c-avatar | --pf-v6-c-avatar--BorderColor | transparent | ||
| .pf-v6-c-avatar | --pf-v6-c-avatar--BorderWidth | 0 | ||
| .pf-v6-c-avatar | --pf-v6-c-avatar--BorderRadius | 999px | ||
| ||||
| .pf-v6-c-avatar | --pf-v6-c-avatar--Width | 2.25rem | ||
| .pf-v6-c-avatar | --pf-v6-c-avatar--Height | 2.25rem | ||
| .pf-v6-c-avatar | --pf-v6-c-avatar--m-sm--Width | 1.5rem | ||
| .pf-v6-c-avatar | --pf-v6-c-avatar--m-sm--Height | 1.5rem | ||
| .pf-v6-c-avatar | --pf-v6-c-avatar--m-md--Width | 2.25rem | ||
| .pf-v6-c-avatar | --pf-v6-c-avatar--m-md--Height | 2.25rem | ||
| .pf-v6-c-avatar | --pf-v6-c-avatar--m-lg--Width | 4.5rem | ||
| .pf-v6-c-avatar | --pf-v6-c-avatar--m-lg--Height | 4.5rem | ||
| .pf-v6-c-avatar | --pf-v6-c-avatar--m-xl--Width | 8rem | ||
| .pf-v6-c-avatar | --pf-v6-c-avatar--m-xl--Height | 8rem | ||
| .pf-v6-c-avatar | --pf-v6-c-avatar--m-bordered--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-avatar | --pf-v6-c-avatar--m-bordered--BorderWidth | 1px | ||
| ||||
| .pf-v6-c-avatar.pf-m-bordered | --pf-v6-c-avatar--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-avatar.pf-m-bordered | --pf-v6-c-avatar--BorderWidth | 1px | ||
| ||||
| .pf-v6-c-avatar.pf-m-sm | --pf-v6-c-avatar--Width | 1.5rem | ||
| ||||
| .pf-v6-c-avatar.pf-m-sm | --pf-v6-c-avatar--Height | 1.5rem | ||
| ||||
| .pf-v6-c-avatar.pf-m-md | --pf-v6-c-avatar--Width | 2.25rem | ||
| ||||
| .pf-v6-c-avatar.pf-m-md | --pf-v6-c-avatar--Height | 2.25rem | ||
| ||||
| .pf-v6-c-avatar.pf-m-lg | --pf-v6-c-avatar--Width | 4.5rem | ||
| ||||
| .pf-v6-c-avatar.pf-m-lg | --pf-v6-c-avatar--Height | 4.5rem | ||
| ||||
| .pf-v6-c-avatar.pf-m-xl | --pf-v6-c-avatar--Width | 8rem | ||
| ||||
| .pf-v6-c-avatar.pf-m-xl | --pf-v6-c-avatar--Height | 8rem | ||
| ||||