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 | Description |
|---|---|
|
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 |
The type of pattern to display. |
|
|
pattern |
pattern |
The type of pattern to display. |
|
|
plain |
plain |
When true, hides the title and subtitle |
|
|
| Method Name | Description |
|---|---|
updatePattern() |
| CSS Property | Description | Default |
|---|---|---|
--rh-avatar-colors |
List of colors to use when generating avatars |
—
|
--rh-avatar-size |
Size of the avatar, |
64px
|
| Token | Copy |
|---|---|
--rh-border-radius-pill
|
|
--rh-color-blue-30
|
|
--rh-color-blue-50
|
|
--rh-color-green-60
|
|
--rh-color-green-70
|
|
--rh-color-interactive-primary-default
|
|
--rh-color-interactive-primary-hover
|
|
--rh-color-interactive-primary-visited-default
|
|
--rh-color-purple-60
|
|
--rh-color-purple-70
|
|
--rh-color-red-40
|
|
--rh-color-red-50
|
|
--rh-color-teal-50
|
|
--rh-color-teal-70
|
|
--rh-color-text-secondary
|
|
--rh-font-family-heading
|
|
--rh-font-size-body-text-sm
|
|
--rh-font-weight-heading-medium
|
|
--rh-font-weight-heading-regular
|
|
--rh-size-icon-06
|
|
--rh-space-lg
|
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
