Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button group Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Avatar

OverviewStyleGuidelinesCodeAccessibilityDemos
ImportingUsagerh-avatarImportingUsagerh-avatar

Importing

Add rh-avatar to your page with this import statement:

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

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="khayyam.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

Provides a small thumbnail representation of a user, including image and optional title and subtitle. Use when representing a specific person by image, name, and/or job title.

Slots 2

Slot Name Summary Description
[default]

The subject's name. Should contain inline text, optionally wrapped in a link. When plain is set, the name and subtitle are used as accessible labels
Note: [default] unnamed slots do not have a slot="name" attribute.
subtitle

Auxiliary information about the subject, e.g. job title. Should contain inline text, optional links. When plain is set, the name and subtitle are used as accessible labels

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
 
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. When `plain` is set, the name and subtitle are used as accessible labels

 
string
 
unknown
subtitle subtitle

Auxiliary information about the user. May be used to add job title, company, etc. When `plain` is set, the name and subtitle are used as accessible labels

 
string
 
unknown
layout layout

Places avatar on the left or on top of the text.

 
'inline' | 'block'
 
unknown
pattern pattern

The type of pattern to display.

 
'squares' | 'triangles'
 
unknown
plain plain

When true, hides the title and subtitle

 
boolean
 
false
variant variant

Adds a subtle border to the avatar image

 
'bordered'
 
unknown

Methods 0 1

None

Method Name Description Reason
updatePattern()

Called when the pattern or name changes

a future version will remove this public method

Events 0

None

CSS Shadow Parts 2

Part Name Summary Description
canvas

Target the canvas element
img

Targets the img or svg element. Avoid using this part for theming

CSS Custom Properties 2

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 var(--rh-size-icon-06, 64px)

Design Tokens 23

Token Description Copy
--rh-border-radius-pill

Default avatar border radius

Pill border radius; Example: Label
--rh-font-family-heading

Avatar title font family

Heading font family
--rh-font-weight-heading-medium

Avatar title font weight

Medium font weight for headings
--rh-font-weight-heading-regular

Avatar subtitle font weight

Regular font weight for headings
--rh-font-size-body-text-sm

Avatar title font size

Avatar subtitle font size

14px font size
--rh-color-interactive-primary-default

Avatar link color
--rh-color-interactive-primary-visited-default

Avatar visited slotted link color
--rh-color-interactive-primary-hover

Avatar hovered or active slotted link color
--rh-color-blue-30

Inline link (dark theme)
--rh-color-teal-50

Alert - Default accent
--rh-color-green-60

Alert - Success accent
--rh-color-red-40

Light brand red
--rh-color-purple-60

Inline link visited (light theme)
--rh-color-blue-50

Label - Filled (Blue) accent color
--rh-color-teal-70

Alert - Default title text
--rh-color-green-70

Alert - Success title text
--rh-color-red-50

Brand red (light and dark theme)
--rh-color-purple-70

Inline link visited hover (light theme)
--rh-color-text-secondary

Avatar title/subtitle text color
--rh-space-lg

Gap between the avatar and title/text in inline layouts

Avatar blockwise end margin in block layouts

Avatar blockwise end margin in block layouts

16px spacer
--rh-size-icon-06

Default avatar size

64px icon box
--rh-border-width-sm

Avatar border width when bordered is true

1px border width; Example: Secondary CTA or Button
--rh-color-border-subtle

Avatar border color when bordered is true
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify