Avatar
On this page
On this page
Overview
An avatar is a small thumbnail representation of a user.
Edit element properties
rh-avatar::part(img) {
object-position: top;
}import '@rhds/elements/rh-avatar/rh-avatar.js';<rh-avatar name="Omar Khayyam" subtitle="Mathematician, Astronomer" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/005-a-Ruby-kindles-in-the-vine-810x1146.jpg/212px-005-a-Ruby-kindles-in-the-vine-810x1146.jpg"></rh-avatar>The URL to the user's custom avatar image.
It will be displayed instead of a random pattern.
The user's name, either given name and family name, or username.
When displaying a pattern, the name will be used to seed the pattern generator.
The auxiliary information about the user, e.g. job title
Places avatar on the left or on top of the text.
The type of pattern to display.
When true, hides the title and subtitle
Adds a subtle border to the avatar image
Status
What do these mean?
- Figma library:
-
Ready - RH Elements:
-
Ready - RH Shared Libs:
-
Ready
When to use
- When you need to represent a user who has not provided a photo or image
Image of an avatar group with a photo of a woman and text
Status checklist
| Property | Status | Meaning |
|---|---|---|
| Figma library |
|
Component is available in the Figma library |
| RH Elements |
|
Component is available in RH Elements |
| RH Shared Libs |
|
Component is available in RH Shared Libs |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
