Avatar

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Installation
  2. Usage
  1. Installation
  2. Usage

Installation

We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.1/elements/",
  }
}
</script>
Copy to Clipboard Wrap lines NPM 
npm install @rhds/elements
Copy to Clipboard Wrap lines JSPM 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-avatar/rh-avatar.js": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/rh-avatar/rh-avatar.js"
  },
  "scopes": {
    "https://ga.jspm.io/": {
      "@floating-ui/core": "https://ga.jspm.io/npm:@floating-ui/core@1.6.8/dist/floating-ui.core.mjs",
      "@floating-ui/dom": "https://ga.jspm.io/npm:@floating-ui/dom@1.6.12/dist/floating-ui.dom.mjs",
      "@floating-ui/utils": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.mjs",
      "@floating-ui/utils/dom": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.dom.mjs",
      "@lit/context": "https://ga.jspm.io/npm:@lit/context@1.1.3/development/index.js",
      "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
      "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
      "@patternfly/pfe-core": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/",
      "@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@rhds/elements/lib/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/lib/",
      "@rhds/elements/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/elements/",
      "@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
      "@rhds/icons/ui/": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/ui/",
      "@rhds/tokens/css/": "https://ga.jspm.io/npm:@rhds/tokens@2.1.1/css/",
      "@rhds/tokens/media.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.1/js/media.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.1/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.1/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.1/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.1/development/",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.1/",
      "prism-esm": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/prism.js",
      "prism-esm/components/": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/components/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.8.1/tslib.es6.mjs"
    }
  }
}
</script>
Copy to Clipboard Wrap lines

Add it to your page with this import statement

<script type="module">
  import '@rhds/elements/rh-avatar/rh-avatar.js';
</script>
Copy to Clipboard Wrap lines

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>
Copy to Clipboard Wrap lines

rh-avatar

An avatar is a small thumbnail representation of a user.

Slots 2
Slot Name Description

The subject's name
subtitle

auxiliary information about the subject, e.g. job title
Attributes 7
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.

 
string | undefined
 
unknown
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.

 
string | undefined
 
unknown
subtitle subtitle

The auxiliary information about the user, e.g. job title

 
string | undefined
 
unknown
layout layout

The type of pattern to display.

 
'inline' | 'block' | undefined
 
unknown
pattern pattern

The type of pattern to display.

 
'squares' | 'triangles' | undefined
 
unknown
plain plain

When true, hides the title and subtitle

 
boolean
 
false
on on 
ColorTheme | undefined
 
unknown
Methods 1
Method Name Description
updatePattern()
Events 0
None
CSS Shadow Parts 0
None
CSS Custom Properties 2
CSS Property Description Default
--rh-avatar-colors

List of colors to use when generating avatars

 —
--rh-avatar-size

Size of the avatar,

 64px
Design Tokens 25
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-on-dark
--rh-color-interactive-primary-default-on-light
--rh-color-interactive-primary-hover-on-dark
--rh-color-interactive-primary-hover-on-light
--rh-color-interactive-primary-visited-default-on-dark
--rh-color-interactive-primary-visited-default-on-light
--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-on-dark
--rh-color-text-secondary-on-light
--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
Edit this page on GitHub