Examples
Documentation
Overview
The avatar component provides a default SVG icon. If an image is used it should be 36px by 36px.
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
alt | .pf-v5-c-avatar | The alt attribute describes the appearance and function of the avatar image. Required |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v5-c-avatar | <img> | Initiates an avatar image. Required |
.pf-m-light | .pf-v5-c-avatar | Modifies an avatar for use against a light background. |
.pf-m-dark | .pf-v5-c-avatar | Modifies an avatar for use against a dark background. |
.pf-m-sm{-on-[breakpoint]} | .pf-v5-c-avatar | Modifies an avatar to be small on an optional breakpoint. |
.pf-m-md{-on-[breakpoint]} | .pf-v5-c-avatar | Modifies an avatar to be medium on an optional breakpoint. Note: This is the default size. |
.pf-m-lg{-on-[breakpoint]} | .pf-v5-c-avatar | Modifies an avatar to be large on an optional breakpoint. |
.pf-m-xl{-on-[breakpoint]} | .pf-v5-c-avatar | Modifies an avatar to be extra large on an optional breakpoint. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-avatar | --pf-v5-c-avatar--BorderColor | transparent | ||
| .pf-v5-c-avatar | --pf-v5-c-avatar--BorderWidth | 0 | ||
| .pf-v5-c-avatar | --pf-v5-c-avatar--BorderRadius | 30em | ||
--pf-v5-c-avatar--BorderRadius --pf-v5-global--BorderRadius--lg $pf-v5-global--BorderRadius--lg 30em | ||||
| .pf-v5-c-avatar | --pf-v5-c-avatar--Width | 2.25rem | ||
| .pf-v5-c-avatar | --pf-v5-c-avatar--Height | 2.25rem | ||
| .pf-v5-c-avatar | --pf-v5-c-avatar--m-sm--Width | 1.5rem | ||
| .pf-v5-c-avatar | --pf-v5-c-avatar--m-sm--Height | 1.5rem | ||
| .pf-v5-c-avatar | --pf-v5-c-avatar--m-md--Width | 2.25rem | ||
| .pf-v5-c-avatar | --pf-v5-c-avatar--m-md--Height | 2.25rem | ||
| .pf-v5-c-avatar | --pf-v5-c-avatar--m-lg--Width | 4.5rem | ||
| .pf-v5-c-avatar | --pf-v5-c-avatar--m-lg--Height | 4.5rem | ||
| .pf-v5-c-avatar | --pf-v5-c-avatar--m-xl--Width | 8rem | ||
| .pf-v5-c-avatar | --pf-v5-c-avatar--m-xl--Height | 8rem | ||
| .pf-v5-c-avatar | --pf-v5-c-avatar--m-light--BorderColor | #d2d2d2 | ||
--pf-v5-c-avatar--m-light--BorderColor --pf-v5-global--BorderColor--dark-100 $pf-v5-global--BorderColor--dark-100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-avatar | --pf-v5-c-avatar--m-light--BorderWidth | 1px | ||
--pf-v5-c-avatar--m-light--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-avatar | --pf-v5-c-avatar--m-dark--BorderColor | #4f5255 | ||
--pf-v5-c-avatar--m-dark--BorderColor --pf-v5-global--palette--black-700 $pf-v5-color-black-700 #4f5255 | ||||
| .pf-v5-c-avatar | --pf-v5-c-avatar--m-dark--BorderWidth | 1px | ||
--pf-v5-c-avatar--m-dark--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-avatar.pf-m-light | --pf-v5-c-avatar--BorderColor | #d2d2d2 | ||
--pf-v5-c-avatar--BorderColor --pf-v5-c-avatar--m-light--BorderColor --pf-v5-global--BorderColor--dark-100 $pf-v5-global--BorderColor--dark-100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-avatar.pf-m-light | --pf-v5-c-avatar--BorderWidth | 1px | ||
--pf-v5-c-avatar--BorderWidth --pf-v5-c-avatar--m-light--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-avatar.pf-m-dark | --pf-v5-c-avatar--BorderColor | #4f5255 | ||
--pf-v5-c-avatar--BorderColor --pf-v5-c-avatar--m-dark--BorderColor --pf-v5-global--palette--black-700 $pf-v5-color-black-700 #4f5255 | ||||
| .pf-v5-c-avatar.pf-m-dark | --pf-v5-c-avatar--BorderWidth | 1px | ||
--pf-v5-c-avatar--BorderWidth --pf-v5-c-avatar--m-dark--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-avatar.pf-m-sm | --pf-v5-c-avatar--Width | 1.5rem | ||
--pf-v5-c-avatar--Width --pf-v5-c-avatar--m-sm--Width 1.5rem | ||||
| .pf-v5-c-avatar.pf-m-sm | --pf-v5-c-avatar--Height | 1.5rem | ||
--pf-v5-c-avatar--Height --pf-v5-c-avatar--m-sm--Height 1.5rem | ||||
| .pf-v5-c-avatar.pf-m-md | --pf-v5-c-avatar--Width | 2.25rem | ||
--pf-v5-c-avatar--Width --pf-v5-c-avatar--m-md--Width 2.25rem | ||||
| .pf-v5-c-avatar.pf-m-md | --pf-v5-c-avatar--Height | 2.25rem | ||
--pf-v5-c-avatar--Height --pf-v5-c-avatar--m-md--Height 2.25rem | ||||
| .pf-v5-c-avatar.pf-m-lg | --pf-v5-c-avatar--Width | 4.5rem | ||
--pf-v5-c-avatar--Width --pf-v5-c-avatar--m-lg--Width 4.5rem | ||||
| .pf-v5-c-avatar.pf-m-lg | --pf-v5-c-avatar--Height | 4.5rem | ||
--pf-v5-c-avatar--Height --pf-v5-c-avatar--m-lg--Height 4.5rem | ||||
| .pf-v5-c-avatar.pf-m-xl | --pf-v5-c-avatar--Width | 8rem | ||
--pf-v5-c-avatar--Width --pf-v5-c-avatar--m-xl--Width 8rem | ||||
| .pf-v5-c-avatar.pf-m-xl | --pf-v5-c-avatar--Height | 8rem | ||
--pf-v5-c-avatar--Height --pf-v5-c-avatar--m-xl--Height 8rem | ||||
View source on GitHub
