Avatar
Importing
Add rh-avatar to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-avatar/rh-avatar.js';
</script>To learn more about installing RHDS elements on your site using an import map read our getting started docs.
Usage
<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>rh-avatar
An avatar is a small thumbnail representation of a user.
| Slot Name | Summary | Description |
|---|---|---|
[default]
|
The subject's name |
|
subtitle
|
auxiliary information about the subject, e.g. job title |
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
src
|
src |
The URL to the user's custom avatar image. It will be displayed instead of a random pattern. |
|
|
name
|
name |
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. |
|
|
subtitle
|
subtitle |
The auxiliary information about the user, e.g. job title |
|
|
layout
|
layout |
Places avatar on the left or on top of the text. |
|
|
pattern
|
pattern |
The type of pattern to display. |
|
|
plain
|
plain |
When true, hides the title and subtitle |
|
|
variant
|
variant |
Adds a subtle border to the avatar image |
|
|
| Method Name | Description |
|---|---|
updatePattern()
|
| Part Name | Summary | Description |
|---|---|---|
canvas
|
Target the canvas element |
|
img
|
Targets the img or svg element |
| CSS Property | Description | Default |
|---|---|---|
--rh-avatar-colors |
var(--rh-color-blue-50, #0066cc) var(--rh-color-teal-70, #004d4d) var(--rh-color-green-70, #204d00) var(--rh-color-red-50, #ee0000) var(--rh-color-purple-70, #21134d)
|
|
--rh-avatar-size |
Size of the avatar, |
var(--rh-size-icon-06, 64px)
|
| Token | Summary | Copy |
|---|---|---|
--rh-color-text-secondary
|
|
|
--rh-color-blue-30
|
|
|
--rh-color-teal-50
|
|
|
--rh-color-green-60
|
|
|
--rh-color-red-40
|
|
|
--rh-color-purple-60
|
|
|
--rh-color-blue-50
|
|
|
--rh-color-teal-70
|
|
|
--rh-color-green-70
|
|
|
--rh-color-red-50
|
|
|
--rh-color-purple-70
|
|
|
--rh-font-family-heading
|
|
|
--rh-font-weight-heading-medium
|
|
|
--rh-font-weight-heading-regular
|
|
|
--rh-font-size-body-text-sm
|
|
|
--rh-space-lg
|
|
|
--rh-color-interactive-primary-default
|
|
|
--rh-color-interactive-primary-visited-default
|
|
|
--rh-color-interactive-primary-hover
|
|
|
--rh-size-icon-06
|
|
|
--rh-border-radius-pill
|
|
|
--rh-border-width-sm
|
|
|
--rh-color-border-subtle
|
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
