Avatar

Overview Style Guidelines Code Demos Accessibility
  1. Usage
  2. rh-avatar
  1. Usage
  2. rh-avatar

Installation

Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="module">
  import '@rhds/elements/rh-avatar/rh-avatar.js';
</script>
Import Map Example 
<script type="importmap">
  {
    "imports": {
      "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.0.1/elements/",
    }
  }
</script>
 NPM 
npm install @rhds/elements
<script type="module">
  import '@rhds/elements/rh-avatar/rh-avatar.js';
</script>
 JSPM 
<script type="module">
  import '@rhds/elements/rh-avatar/rh-avatar.js';
</script>
Import Map Example 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-avatar/rh-avatar.js": "./elements/rh-avatar/rh-avatar.js"
  },
  "scopes": {
    "./": {
      "@patternfly/pfe-core/controllers/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/controllers/",
      "@rhds/tokens/css/color-context-consumer.css.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0-next.15/css/color-context-consumer.css.js",
      "@rhds/tokens/media.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0-next.15/js/media.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.0/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    },
    "https://ga.jspm.io/": {
      "@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/",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.0/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.0/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.0/development/"
    }
  }
}
</script>

Usage 

  <rh-avatar></rh-avatar>

rh-avatar

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