Avatar
Overview
An avatar is a small thumbnail representation of a user.
Status
- Figma library:
-
Ready - RH Elements:
-
Ready - WebRH:
-
Ready
Sample element
Demo
View a live version of this element to see how it can be customized.
<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>
<style>
rh-avatar::part(img) {
object-position: top;
}
</style>
<script type="module">
import '@rhds/elements/rh-avatar/rh-avatar.js';
</script>
When to use
- When you need to represent a user who has not provided a photo or image
Status checklist
| Property | Status | Meaning |
|---|---|---|
| Figma library |
|
Component is available in the Figma library |
| RH Elements |
|
Component is available in the RH Elements repo |
| WebRH |
|
Component is available in the WebRH repo |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
