Examples
Basic usage
Avatars can be created using either an <img> element with an image source, or a <div> element with custom content.
Color modifiers
Color modifiers add visual interest and automatically include a border. The available colors are: "red", "orangered", "orange", "yellow", "green", "teal", "blue", "purple", and "gray".
With initials
Display a user's initials in the avatar. It's recommended to pass only a single initial to ensure the text fits inside of the avatar.
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-v6-c-avatar | The alt attribute describes the appearance and function of the avatar image. Required for image avatars |
role="img" | .pf-v6-c-avatar | Indicates the element represents an image. Required for colorful avatars |
aria-label | .pf-v6-c-avatar | Provides an accessible name for the avatar. Required for colorful avatars |
aria-hidden="true" | .pf-v6-c-avatar__initials, <svg> | Hides decorative content from screen readers when the container has aria-label. |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v6-c-avatar | <img>, <div> | Initiates an avatar. Required |
.pf-v6-c-avatar__initials | <span> | Contains the user's initials in a colorful avatar. |
.pf-m-bordered | .pf-v6-c-avatar | Modifies an avatar to have a border. |
.pf-m-sm{-on-[breakpoint]} | .pf-v6-c-avatar | Modifies an avatar to be small on an optional breakpoint. |
.pf-m-md{-on-[breakpoint]} | .pf-v6-c-avatar | Modifies an avatar to be medium on an optional breakpoint. Note: This is the default size. |
.pf-m-lg{-on-[breakpoint]} | .pf-v6-c-avatar | Modifies an avatar to be large on an optional breakpoint. |
.pf-m-xl{-on-[breakpoint]} | .pf-v6-c-avatar | Modifies an avatar to be extra large on an optional breakpoint. |
.pf-m-colorful | .pf-v6-c-avatar | Modifies an avatar to use colorful styling with a border. |
.pf-m-red | .pf-v6-c-avatar | Modifies avatar for red styling. |
.pf-m-orangered | .pf-v6-c-avatar | Modifies avatar for orangered styling. |
.pf-m-orange | .pf-v6-c-avatar | Modifies avatar for orange styling. |
.pf-m-yellow | .pf-v6-c-avatar | Modifies avatar for yellow styling. |
.pf-m-green | .pf-v6-c-avatar | Modifies avatar for green styling. |
.pf-m-teal | .pf-v6-c-avatar | Modifies avatar for teal styling. |
.pf-m-blue | .pf-v6-c-avatar | Modifies avatar for blue styling. |
.pf-m-purple | .pf-v6-c-avatar | Modifies avatar for purple styling. |
.pf-m-gray | .pf-v6-c-avatar | Modifies avatar for gray styling. |
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) #e0e0e0 | ||
| ||||
| .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) #e0e0e0 | ||
| ||||
| .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 | ||
| ||||