Avatar
An avatar provides a visual representation of a user for navigation
headers, user lists, or comment threads. When src is set, it renders
the image; when omitted, it provides a placeholder silhouette. Authors
SHOULD set alt when the avatar conveys identity.
Overview
An avatar is a visual used to represent a user. It may contain an image or a placeholder graphic.
Installation
npm install @patternfly/elementsUsage
Default (placeholder)
View HTML Source
<pf-v6-avatar></pf-v6-avatar>
With image
View HTML Source
<pf-v6-avatar src="https://www.gravatar.com/avatar/?d=mp&f=y" alt="User avatar"></pf-v6-avatar>
Bordered
View HTML Source
<pf-v6-avatar bordered></pf-v6-avatar>
<pf-v6-avatar bordered src="https://www.gravatar.com/avatar/?d=mp&f=y" alt="User avatar"></pf-v6-avatar>
Sizes
View HTML Source
<pf-v6-avatar size="sm"></pf-v6-avatar>
<pf-v6-avatar size="md"></pf-v6-avatar>
<pf-v6-avatar size="lg"></pf-v6-avatar>
<pf-v6-avatar size="xl"></pf-v6-avatar>
Slots
None
Attributes
src-
The URL to the user's custom avatar image.
- DOM Property
src- Type
-
string - Default
-
unknown
alt-
The alt text for the avatar image.
- DOM Property
alt- Type
-
string - Default
-
unknown
size-
Size of the avatar
- DOM Property
size- Type
-
'sm' | 'md' | 'lg' | 'xl' - Default
-
unknown
bordered-
Whether to display a border around the avatar
- DOM Property
bordered- Type
-
boolean - Default
-
false
Methods
None
Events
None
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--pf-v6-c-avatar--Width |
Avatar width {@default 2.25rem} |
2.25rem
|
--pf-v6-c-avatar--Height |
Avatar height {@default 2.25rem} |
2.25rem
|
--pf-v6-c-avatar--BorderRadius |
Avatar border radius {@default 30em} |
var(--pf-t--global--border--radius--pill, 30em)
|
--pf-v6-c-avatar--BorderColor |
Avatar border color {@default transparent} |
transparent
|
--pf-v6-c-avatar--BorderWidth |
Avatar border width {@default 0} |
0
|
--pf-v6-c-avatar--m-bordered--BorderColor |
Border color when bordered |
—
|
--pf-v6-c-avatar--m-bordered--BorderWidth |
Border width when bordered |
—
|
--pf-v6-c-avatar--m-sm--Width |
Width when size is sm {@default 1.5rem} |
—
|
--pf-v6-c-avatar--m-sm--Height |
Height when size is sm {@default 1.5rem} |
—
|
--pf-v6-c-avatar--m-md--Width |
Width when size is md {@default 2.25rem} |
—
|
--pf-v6-c-avatar--m-md--Height |
Height when size is md {@default 2.25rem} |
—
|
--pf-v6-c-avatar--m-lg--Width |
Width when size is lg {@default 4.5rem} |
—
|
--pf-v6-c-avatar--m-lg--Height |
Height when size is lg {@default 4.5rem} |
—
|
--pf-v6-c-avatar--m-xl--Width |
Width when size is xl {@default 8rem} |
—
|
--pf-v6-c-avatar--m-xl--Height |
Height when size is xl {@default 8rem} |
—
|
--pf-t--global--border--radius--pill |
Rounds the avatar into a circle |
30em
|
--pf-t--global--background--color--200 |
Placeholder silhouette background fill |
light-dark(
/** Light mode placeholder background */
var(--pf-t--color--gray--10, #f2f2f2),
/** Dark mode placeholder background */
var(--pf-t--color--gray--80, #292929))
|
--pf-t--color--gray--10 |
Light mode placeholder background |
#f2f2f2
|
--pf-t--color--gray--80 |
Dark mode placeholder background |
#292929
|
--pf-t--global--icon--color--subtle |
Placeholder silhouette foreground fill |
light-dark(
/** Light mode placeholder silhouette color */
var(--pf-t--color--gray--50, #707070),
/** Dark mode placeholder silhouette color */
var(--pf-t--color--gray--40, #a3a3a3))
|
--pf-t--color--gray--50 |
Light mode placeholder silhouette color |
#707070
|
--pf-t--color--gray--40 |
Dark mode placeholder silhouette color |
#a3a3a3
|
--pf-t--global--border--color--default |
Default border color for bordered avatars |
#d2d2d2
|
--pf-t--global--border--width--box--default |
Default border width for bordered avatars |
1px
|
CSS Shadow Parts
None
