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 Readtime Scheme toggle Select Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall 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 circular user thumbnail for mastheads, cards, and attribution when you need to visually identify a person. Allows an image, a deterministic pattern, or a default icon. Must not take focus or act as a control; images carry role="presentation". Authors should provide a name via the default slot so screen readers have context.

Theming

Themable

This element uses Red Hat design system theming and can be used in themable contexts.

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

URL to a custom avatar image. Replaces the default icon and any generated pattern. The <img> has role="presentation".

 
string
 
unknown
name name

The user's display name. Falls back as default slot content and seeds the deterministic pattern generator when pattern is set.

 
string
 
unknown
subtitle subtitle

Auxiliary text such as job title or company. Falls back as default content in the subtitle slot.

 
string
 
unknown
layout layout

Thumbnail position relative to text: 'inline' (default, left of text) or 'block' (stacked above). Both collapse to centered block below 576px.

 
'inline' | 'block'
 
unknown
pattern pattern

Type of geometric pattern ('squares' or 'triangles'). Generated deterministically from name so the same name always yields the same pattern. Colors come from the --_colors CSS custom property.

 
'squares' | 'triangles'
 
unknown
plain plain

When true, visually hides the name and subtitle via CSS clip while keeping them accessible to screen readers.

 
boolean
 
false
variant variant

Adds a subtle border around the thumbnail when set to 'bordered'.

 
'bordered'
 
unknown

Methods 0 1

None

Method Name Description Reason
updatePattern()

Re-renders the geometric pattern. Called automatically when pattern or name change; call manually after updating CSS custom properties.

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-size

Thumbnail width and height; capped at the --rh-size-icon-06 token (64px).

 var(--rh-size-icon-06, 64px)
--rh-avatar-colors

Space-separated hex values overriding the built-in light-dark pattern color tokens.

 —

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