Avatar
Overview
An avatar is a visual used to represent a user. It may contain an image or a placeholder graphic.
Installation
npm install @patternfly/elements
Usage
<pf-avatar alt="Eleanore Stillwagon"></pf-avatar>
<pf-avatar alt="Libbie Koscinski"></pf-avatar>
<pf-avatar alt="Blanca Rohloff"></pf-avatar>
<pf-avatar alt="Edwardo Lindsey"
src="https://clayto.com/2014/03/rgb-webgl-color-cube/colorcube.jpg"></pf-avatar>
Slots
None
Attributes
size
-
Size of the Avatar
- DOM Property
size
- Type
-
'sm' | 'md' | 'lg' | 'xl'
- Default
-
'sm'
border
-
Whether to display a border around the avatar
- DOM Property
border
- Type
-
'light' | 'dark' | undefined
- Default
-
unknown
src
-
The URL to the user's custom avatar image.
- DOM Property
src
- Type
-
string | undefined
- Default
-
unknown
alt
-
The alt text for the avatar image.
- DOM Property
alt
- Type
-
string | undefined
- Default
-
'Avatar image'
dark
-
Whether or not the Avatar image is dark
- DOM Property
dark
- Type
-
boolean
- Default
-
false
DOM Properties
None
Methods
None
Events
None
CSS Custom Properties
None
CSS Shadow Parts
None