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
AvatarColor ContextLayout BlockLayout InlineLayouts In Narrow ContainersLinksPatternPlainSizesSubtitlesVariantsAvatarColor ContextLayout BlockLayout InlineLayouts In Narrow ContainersLinksPatternPlainSizesSubtitlesVariantsAvatarColor ContextLayout BlockLayout InlineLayouts In Narrow ContainersLinksPatternPlainSizesSubtitlesVariantsAvatarColor ContextLayout BlockLayout InlineLayouts In Narrow ContainersLinksPatternPlainSizesSubtitlesVariantsAvatarColor ContextLayout BlockLayout InlineLayouts In Narrow ContainersLinksPatternPlainSizesSubtitlesVariantsAvatarColor ContextLayout BlockLayout InlineLayouts In Narrow ContainersLinksPatternPlainSizesSubtitlesVariants

Avatar

Default avatar with a custom image source, name, and subtitle, plus a CSS ::part(img) override for image positioning.

rh-avatar::part(img) {
  object-position: top;
}
 
import '@rhds/elements/rh-avatar/rh-avatar.js';
 
<rh-avatar name="Omar Khayyam" subtitle="Mathematician, Astronomer" src="khayyam.jpg"></rh-avatar>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Avatar name="Omar Khayyam" subtitle="Mathematician, Astronomer" src="khayyam.jpg" />
);

Color Context

Avatars rendered inside an rh-context-demo to show behavior across light and dark color schemes, including slotted content, plain variants, custom images, and generated patterns.

import '@rhds/elements/rh-avatar/rh-avatar.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
 
<rh-context-demo>
  <rh-avatar>George Boole
    <span slot="subtitle">Professor of Mathematics, </span>
    <a slot="subtitle" href="https://www.wikiwand.com/en/Queen's_College,_Cork">Queen's College, Cork</a>
  </rh-avatar>
  <rh-avatar name="John von Neumann" subtitle="Mathematician" plain=""></rh-avatar>
  <rh-avatar name="Grace Hopper" subtitle="Rear Admiral" src="hopper.jpg" plain=""></rh-avatar>
  <rh-avatar name="Haskell Curry" subtitle="Computer Scientist" pattern="squares" plain=""></rh-avatar>
  <rh-avatar name="Edsger Dijkstra" subtitle="Computer Scientist" pattern="triangles" plain=""></rh-avatar>
</rh-context-demo>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";
import { ContextDemo } from "@rhds/elements/react/rh-context-demo/rh-context-demo.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ContextDemo>
    <Avatar>
      George Boole
      <span slot="subtitle">Professor of Mathematics,</span>
      <a slot="subtitle" href="https://www.wikiwand.com/en/Queen's_College,_Cork">Queen's College, Cork</a>
    </Avatar>
    <Avatar name="John von Neumann" subtitle="Mathematician" plain />
    <Avatar name="Grace Hopper" subtitle="Rear Admiral" src="hopper.jpg" plain />
    <Avatar name="Haskell Curry" subtitle="Computer Scientist" pattern="squares" plain />
    <Avatar name="Edsger Dijkstra" subtitle="Computer Scientist" pattern="triangles" plain />
  </ContextDemo>
);

Layout Block

Avatar using the block layout, which stacks the thumbnail above the name and subtitle text.

import '@rhds/elements/rh-avatar/rh-avatar.js';
 
<rh-avatar name="John von Neumann" subtitle="Mathematician" layout="block"></rh-avatar>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Avatar name="John von Neumann" subtitle="Mathematician" layout="block" />
);

Layout Inline

Avatar using the inline layout, which places the thumbnail beside the name and subtitle text.

import '@rhds/elements/rh-avatar/rh-avatar.js';
 
<rh-avatar name="Grace Hopper" subtitle="Rear Admiral" src="hopper.jpg" layout="inline"></rh-avatar>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Avatar name="Grace Hopper" subtitle="Rear Admiral" src="hopper.jpg" layout="inline" />
);

Layouts In Narrow Containers

Inline bordered avatars with linked names in a narrow container, demonstrating text wrapping and layout toggle.

#test {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--rh-space-xl, 24px);
  padding: var(--rh-space-xl, 24px);
  justify-content: space-between;
  flex-wrap: wrap;
  max-inline-size: 450px;

  &.repro {
    max-inline-size: 250px;
  }
}

rh-avatar {
  --rh-avatar-size: var(--rh-length-3xl, 48px);
  --rh-color-surface-darker: var(--rh-color-purple-70, #21134d);
  --rh-color-border-subtle: var(--rh-color-brand-red, light-dark(var(--rh-color-brand-red-on-light, #ee0000), var(--rh-color-brand-red-on-dark, #ee0000)));
  --rh-color-text-secondary: --var(--rh-color-accent-base, light-dark(var(--rh-color-accent-base-on-light, #0066cc), var(--rh-color-accent-base-on-dark, #92c5f9)));
  --rh-color-interactive-primary-default-on-dark: var(--rh-color-accent-base, light-dark(var(--rh-color-accent-base-on-light, #0066cc), var(--rh-color-accent-base-on-dark, #92c5f9)));
  --rh-color-interactive-primary-visited-default-on-dark: var(--rh-color-accent-base, light-dark(var(--rh-color-accent-base-on-light, #0066cc), var(--rh-color-accent-base-on-dark, #92c5f9)));
  --rh-color-interactive-primary-hover-on-dark: var(--rh-color-accent);
  --rh-border-width-sm: var(--rh-length-xs, 4px);

  padding: var(--rh-space-lg, 16px);
  background-color: var(--rh-color-surface-darker, #1f1f1f);
  color-scheme: dark only;
  border-radius: var(--rh-border-radius-pill, 64px);
}
 
import "@rhds/elements/rh-avatar/rh-avatar.js";
import "@rhds/elements/rh-switch/rh-switch.js";
const repro = document.getElementById('repro');
const test = document.getElementById('test');
repro.addEventListener('change', function () {
  test.classList.toggle('repro');
});
 
<div id="test">
  <label for="repro">
    <rh-switch id="repro"></rh-switch>
    Toggle reproduction
  </label>

  <rh-avatar layout="inline" variant="bordered">
    <a href="/en/authors/ana-biazetti">
      Ana Biazetti
    </a>
    <a slot="subtitle" href="/en/authors/ana-biazetti">
      Senior Principal Engineer, Red Hat AI
    </a>
  </rh-avatar>
  <rh-avatar layout="inline" variant="bordered">
    <a href="/en/authors/lindani-phiri">
      Lindani Phiri
    </a>
    <a slot="subtitle" href="/en/authors/lindani-phiri">
      Architect, Red Hat AI
    </a>
  </rh-avatar>
</div>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";
import { Switch } from "@rhds/elements/react/rh-switch/rh-switch.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <div id="test">
    <label htmlFor="repro">
      <Switch id="repro" />
      Toggle reproduction
    </label>
    <Avatar layout="inline" variant="bordered">
      <a href="/en/authors/ana-biazetti">Ana Biazetti</a>
      <a slot="subtitle" href="/en/authors/ana-biazetti">Senior Principal Engineer, Red Hat AI</a>
    </Avatar>
    <Avatar layout="inline" variant="bordered">
      <a href="/en/authors/lindani-phiri">Lindani Phiri</a>
      <a slot="subtitle" href="/en/authors/lindani-phiri">Architect, Red Hat AI</a>
    </Avatar>
  </div>
);

Avatars with anchor elements slotted in the name and subtitle slots, demonstrating interactive link color styles.

figure,
figcaption {
  margin-block-end: 1rem;
}
 
import '@rhds/elements/rh-avatar/rh-avatar.js';
 
<figure>
  <figcaption>Links applied to Name</figcaption>
  <rh-avatar src="wing.jpg">
    <a href="https://www.wikiwand.com/en/Jeannette_Wing">Jeannette Wing</a>
    <span slot="subtitle">Avanessians Director of the Data Science Institute, Columbia University</span>
  </rh-avatar>
</figure>

<figure>
  <figcaption>Links applied to job details</figcaption>
  <rh-avatar src="boole.jpg">George Boole
    <span slot="subtitle">Professor of Mathematics, </span>
    <a slot="subtitle" href="https://www.wikiwand.com/en/Queen's_College,_Cork">Queen's College, Cork</a>
  </rh-avatar>
</figure>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <figure>
    <figcaption>Links applied to Name</figcaption>
    <Avatar src="wing.jpg">
      <a href="https://www.wikiwand.com/en/Jeannette_Wing">Jeannette Wing</a>
      <span slot="subtitle">Avanessians Director of the Data Science Institute, Columbia University</span>
    </Avatar>
  </figure>
  <figure>
    <figcaption>Links applied to job details</figcaption>
    <Avatar src="boole.jpg">
      George Boole
      <span slot="subtitle">Professor of Mathematics,</span>
      <a slot="subtitle" href="https://www.wikiwand.com/en/Queen's_College,_Cork">Queen's College, Cork</a>
    </Avatar>
  </figure>
);

Pattern

Generated geometric patterns (squares and triangles) that are deterministically derived from the user's name.

figure,
figcaption {
  margin-block-end: 1rem;
}
 
import '@rhds/elements/rh-avatar/rh-avatar.js';
 
<figure>
  <figcaption>Squares pattern</figcaption>
  <rh-avatar name="Alonzo Church" subtitle="Inventor of the Lambda Calculus" pattern="squares"></rh-avatar>
</figure>

<figure>
  <figcaption>Triangles pattern</figcaption>
  <rh-avatar name="Alan Turing" subtitle="Cryptographer" pattern="triangles"></rh-avatar>
</figure>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <figure>
    <figcaption>Squares pattern</figcaption>
    <Avatar name="Alonzo Church" subtitle="Inventor of the Lambda Calculus" pattern="squares" />
  </figure>
  <figure>
    <figcaption>Triangles pattern</figcaption>
    <Avatar name="Alan Turing" subtitle="Cryptographer" pattern="triangles" />
  </figure>
);

Plain

Plain variant avatars showing thumbnail-only display (name and subtitle visually hidden) for default icon, custom image, squares pattern, and triangles pattern.

#plain-avatar {
  display: flex;
  padding: var(--rh-space-xl, 24px);
  gap: var(--rh-space-md, 8px);
}
 
import '@rhds/elements/rh-avatar/rh-avatar.js';
 
<section id="plain-avatar">
  <rh-avatar name="John von Neumann" subtitle="Mathematician" plain=""></rh-avatar>
  <rh-avatar name="Grace Hopper" subtitle="Rear Admiral" src="hopper.jpg" plain=""></rh-avatar>
  <rh-avatar name="Haskell Curry" subtitle="Computer Scientist" pattern="squares" plain=""></rh-avatar>
  <rh-avatar name="Edsger Dijkstra" subtitle="Computer Scientist" pattern="triangles" plain=""></rh-avatar>
</section>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <section id="plain-avatar">
    <Avatar name="John von Neumann" subtitle="Mathematician" plain />
    <Avatar name="Grace Hopper" subtitle="Rear Admiral" src="hopper.jpg" plain />
    <Avatar name="Haskell Curry" subtitle="Computer Scientist" pattern="squares" plain />
    <Avatar name="Edsger Dijkstra" subtitle="Computer Scientist" pattern="triangles" plain />
  </section>
);

Sizes

Avatars at different sizes using the --rh-avatar-size custom property with various --rh-size-icon-* design tokens, including the maximum size cap.

figure,
figcaption {
  margin-block-end: 1rem;
}
 
import '@rhds/elements/rh-avatar/rh-avatar.js';
 
<figure>
  <figcaption><code>--rh-size-icon-03</code></figcaption>
  <rh-avatar name="Radia Perlman" subtitle="Mother of the Internet" src="perlman.jpg" style="--rh-avatar-size:var(--rh-size-icon-03, 32px);">
  </rh-avatar>
</figure>

<figure>
  <figcaption><code>--rh-size-icon-05</code></figcaption>
  <rh-avatar src="moore.png" name="Gordon Moore" style="--rh-avatar-size:var(--rh-size-icon-05, 48px);">
    <span slot="subtitle">Co-founder, <em>Intel</em></span>
  </rh-avatar>
</figure>

<figure>
  <figcaption><code>--rh-size-icon-06</code> <small>(default)</small></figcaption>
  <rh-avatar src="johnson.jpg" name="Katherine Johnson" subtitle="Recipient, National Medal of Freedom 2016">
  </rh-avatar>
</figure>

<figure>
  <figcaption>
    <code>--rh-size-icon-08</code>
    <small>Avatars cannot be larger than <code>--rh-size-icon-06</code></small>
  </figcaption>
  <rh-avatar name="Hedy Lamarr" src="lamarr.jpg" subtitle="Jewish actress and inventor" style="--rh-avatar-size:var(--rh-size-icon-08, 96px);"></rh-avatar>
</figure>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <figure>
    <figcaption><code>--rh-size-icon-03</code></figcaption>
    <Avatar name="Radia Perlman" subtitle="Mother of the Internet" src="perlman.jpg" style="--rh-avatar-size:var(--rh-size-icon-03, 32px);" />
  </figure>
  <figure>
    <figcaption><code>--rh-size-icon-05</code></figcaption>
    <Avatar src="moore.png" name="Gordon Moore" style="--rh-avatar-size:var(--rh-size-icon-05, 48px);"><span slot="subtitle">Co-founder,<em>Intel</em></span></Avatar>
  </figure>
  <figure>
    <figcaption><code>--rh-size-icon-06</code><small>(default)</small></figcaption>
    <Avatar src="johnson.jpg" name="Katherine Johnson" subtitle="Recipient, National Medal of Freedom 2016" />
  </figure>
  <figure>
    <figcaption>
      <code>--rh-size-icon-08</code>
      <small>Avatars cannot be larger than<code>--rh-size-icon-06</code></small>
    </figcaption>
    <Avatar name="Hedy Lamarr" src="lamarr.jpg" subtitle="Jewish actress and inventor" style="--rh-avatar-size:var(--rh-size-icon-08, 96px);" />
  </figure>
);

Subtitles

Avatar with a long, multi-line subtitle slotted via a span element, demonstrating text wrapping behavior.

import '@rhds/elements/rh-avatar/rh-avatar.js';
 
<rh-avatar src="schoenfinkel.jpg">Moses Schoenfinkle
  <span slot="subtitle">
    Inventor of Combinatorics,
    often uncreditted for inventing the process of "currying" functions,
    however, "schoenfinkling" doesn't exactly roll off the tongue, so we'll
    let it slide
  </span>
</rh-avatar>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Avatar src="schoenfinkel.jpg">
    Moses Schoenfinkle
    <span slot="subtitle">Inventor of Combinatorics,
      often uncreditted for inventing the process of "currying" functions,
      however, "schoenfinkling" doesn't exactly roll off the tongue, so we'll
      let it slide</span>
  </Avatar>
);

Variants

Bordered variant avatars showing the subtle border treatment on both a default silhouette and a custom image.

#bordered-avatars {
  display: flex;
  padding: var(--rh-space-xl, 24px);
  gap: var(--rh-space-lg, 16px);
}
 
import '@rhds/elements/rh-avatar/rh-avatar.js';
 
<section id="bordered-avatars">
  <rh-avatar name="Bordered von Neumann" subtitle="Mathematician" variant="bordered"></rh-avatar>
  <rh-avatar name="Grace Bordered Jr." subtitle="Rear Admiral" src="hopper.jpg" variant="bordered"></rh-avatar>
</section>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <section id="bordered-avatars">
    <Avatar name="Bordered von Neumann" subtitle="Mathematician" variant="bordered" />
    <Avatar name="Grace Bordered Jr." subtitle="Rear Admiral" src="hopper.jpg" variant="bordered" />
  </section>
);

Avatar

Default avatar with a custom image source, name, and subtitle, plus a CSS ::part(img) override for image positioning.

rh-avatar::part(img) {
  object-position: top;
}
 
import '@rhds/elements/rh-avatar/rh-avatar.js';
 
<rh-avatar name="Omar Khayyam" subtitle="Mathematician, Astronomer" src="khayyam.jpg"></rh-avatar>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Avatar name="Omar Khayyam" subtitle="Mathematician, Astronomer" src="khayyam.jpg" />
);

Color Context

Avatars rendered inside an rh-context-demo to show behavior across light and dark color schemes, including slotted content, plain variants, custom images, and generated patterns.

import '@rhds/elements/rh-avatar/rh-avatar.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
 
<rh-context-demo>
  <rh-avatar>George Boole
    <span slot="subtitle">Professor of Mathematics, </span>
    <a slot="subtitle" href="https://www.wikiwand.com/en/Queen's_College,_Cork">Queen's College, Cork</a>
  </rh-avatar>
  <rh-avatar name="John von Neumann" subtitle="Mathematician" plain=""></rh-avatar>
  <rh-avatar name="Grace Hopper" subtitle="Rear Admiral" src="hopper.jpg" plain=""></rh-avatar>
  <rh-avatar name="Haskell Curry" subtitle="Computer Scientist" pattern="squares" plain=""></rh-avatar>
  <rh-avatar name="Edsger Dijkstra" subtitle="Computer Scientist" pattern="triangles" plain=""></rh-avatar>
</rh-context-demo>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";
import { ContextDemo } from "@rhds/elements/react/rh-context-demo/rh-context-demo.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ContextDemo>
    <Avatar>
      George Boole
      <span slot="subtitle">Professor of Mathematics,</span>
      <a slot="subtitle" href="https://www.wikiwand.com/en/Queen's_College,_Cork">Queen's College, Cork</a>
    </Avatar>
    <Avatar name="John von Neumann" subtitle="Mathematician" plain />
    <Avatar name="Grace Hopper" subtitle="Rear Admiral" src="hopper.jpg" plain />
    <Avatar name="Haskell Curry" subtitle="Computer Scientist" pattern="squares" plain />
    <Avatar name="Edsger Dijkstra" subtitle="Computer Scientist" pattern="triangles" plain />
  </ContextDemo>
);

Layout Block

Avatar using the block layout, which stacks the thumbnail above the name and subtitle text.

import '@rhds/elements/rh-avatar/rh-avatar.js';
 
<rh-avatar name="John von Neumann" subtitle="Mathematician" layout="block"></rh-avatar>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Avatar name="John von Neumann" subtitle="Mathematician" layout="block" />
);

Layout Inline

Avatar using the inline layout, which places the thumbnail beside the name and subtitle text.

import '@rhds/elements/rh-avatar/rh-avatar.js';
 
<rh-avatar name="Grace Hopper" subtitle="Rear Admiral" src="hopper.jpg" layout="inline"></rh-avatar>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Avatar name="Grace Hopper" subtitle="Rear Admiral" src="hopper.jpg" layout="inline" />
);

Layouts In Narrow Containers

Inline bordered avatars with linked names in a narrow container, demonstrating text wrapping and layout toggle.

#test {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--rh-space-xl, 24px);
  padding: var(--rh-space-xl, 24px);
  justify-content: space-between;
  flex-wrap: wrap;
  max-inline-size: 450px;

  &.repro {
    max-inline-size: 250px;
  }
}

rh-avatar {
  --rh-avatar-size: var(--rh-length-3xl, 48px);
  --rh-color-surface-darker: var(--rh-color-purple-70, #21134d);
  --rh-color-border-subtle: var(--rh-color-brand-red, light-dark(var(--rh-color-brand-red-on-light, #ee0000), var(--rh-color-brand-red-on-dark, #ee0000)));
  --rh-color-text-secondary: --var(--rh-color-accent-base, light-dark(var(--rh-color-accent-base-on-light, #0066cc), var(--rh-color-accent-base-on-dark, #92c5f9)));
  --rh-color-interactive-primary-default-on-dark: var(--rh-color-accent-base, light-dark(var(--rh-color-accent-base-on-light, #0066cc), var(--rh-color-accent-base-on-dark, #92c5f9)));
  --rh-color-interactive-primary-visited-default-on-dark: var(--rh-color-accent-base, light-dark(var(--rh-color-accent-base-on-light, #0066cc), var(--rh-color-accent-base-on-dark, #92c5f9)));
  --rh-color-interactive-primary-hover-on-dark: var(--rh-color-accent);
  --rh-border-width-sm: var(--rh-length-xs, 4px);

  padding: var(--rh-space-lg, 16px);
  background-color: var(--rh-color-surface-darker, #1f1f1f);
  color-scheme: dark only;
  border-radius: var(--rh-border-radius-pill, 64px);
}
 
import "@rhds/elements/rh-avatar/rh-avatar.js";
import "@rhds/elements/rh-switch/rh-switch.js";
const repro = document.getElementById('repro');
const test = document.getElementById('test');
repro.addEventListener('change', function () {
  test.classList.toggle('repro');
});
 
<div id="test">
  <label for="repro">
    <rh-switch id="repro"></rh-switch>
    Toggle reproduction
  </label>

  <rh-avatar layout="inline" variant="bordered">
    <a href="/en/authors/ana-biazetti">
      Ana Biazetti
    </a>
    <a slot="subtitle" href="/en/authors/ana-biazetti">
      Senior Principal Engineer, Red Hat AI
    </a>
  </rh-avatar>
  <rh-avatar layout="inline" variant="bordered">
    <a href="/en/authors/lindani-phiri">
      Lindani Phiri
    </a>
    <a slot="subtitle" href="/en/authors/lindani-phiri">
      Architect, Red Hat AI
    </a>
  </rh-avatar>
</div>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";
import { Switch } from "@rhds/elements/react/rh-switch/rh-switch.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <div id="test">
    <label htmlFor="repro">
      <Switch id="repro" />
      Toggle reproduction
    </label>
    <Avatar layout="inline" variant="bordered">
      <a href="/en/authors/ana-biazetti">Ana Biazetti</a>
      <a slot="subtitle" href="/en/authors/ana-biazetti">Senior Principal Engineer, Red Hat AI</a>
    </Avatar>
    <Avatar layout="inline" variant="bordered">
      <a href="/en/authors/lindani-phiri">Lindani Phiri</a>
      <a slot="subtitle" href="/en/authors/lindani-phiri">Architect, Red Hat AI</a>
    </Avatar>
  </div>
);

Avatars with anchor elements slotted in the name and subtitle slots, demonstrating interactive link color styles.

figure,
figcaption {
  margin-block-end: 1rem;
}
 
import '@rhds/elements/rh-avatar/rh-avatar.js';
 
<figure>
  <figcaption>Links applied to Name</figcaption>
  <rh-avatar src="wing.jpg">
    <a href="https://www.wikiwand.com/en/Jeannette_Wing">Jeannette Wing</a>
    <span slot="subtitle">Avanessians Director of the Data Science Institute, Columbia University</span>
  </rh-avatar>
</figure>

<figure>
  <figcaption>Links applied to job details</figcaption>
  <rh-avatar src="boole.jpg">George Boole
    <span slot="subtitle">Professor of Mathematics, </span>
    <a slot="subtitle" href="https://www.wikiwand.com/en/Queen's_College,_Cork">Queen's College, Cork</a>
  </rh-avatar>
</figure>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <figure>
    <figcaption>Links applied to Name</figcaption>
    <Avatar src="wing.jpg">
      <a href="https://www.wikiwand.com/en/Jeannette_Wing">Jeannette Wing</a>
      <span slot="subtitle">Avanessians Director of the Data Science Institute, Columbia University</span>
    </Avatar>
  </figure>
  <figure>
    <figcaption>Links applied to job details</figcaption>
    <Avatar src="boole.jpg">
      George Boole
      <span slot="subtitle">Professor of Mathematics,</span>
      <a slot="subtitle" href="https://www.wikiwand.com/en/Queen's_College,_Cork">Queen's College, Cork</a>
    </Avatar>
  </figure>
);

Pattern

Generated geometric patterns (squares and triangles) that are deterministically derived from the user's name.

figure,
figcaption {
  margin-block-end: 1rem;
}
 
import '@rhds/elements/rh-avatar/rh-avatar.js';
 
<figure>
  <figcaption>Squares pattern</figcaption>
  <rh-avatar name="Alonzo Church" subtitle="Inventor of the Lambda Calculus" pattern="squares"></rh-avatar>
</figure>

<figure>
  <figcaption>Triangles pattern</figcaption>
  <rh-avatar name="Alan Turing" subtitle="Cryptographer" pattern="triangles"></rh-avatar>
</figure>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <figure>
    <figcaption>Squares pattern</figcaption>
    <Avatar name="Alonzo Church" subtitle="Inventor of the Lambda Calculus" pattern="squares" />
  </figure>
  <figure>
    <figcaption>Triangles pattern</figcaption>
    <Avatar name="Alan Turing" subtitle="Cryptographer" pattern="triangles" />
  </figure>
);

Plain

Plain variant avatars showing thumbnail-only display (name and subtitle visually hidden) for default icon, custom image, squares pattern, and triangles pattern.

#plain-avatar {
  display: flex;
  padding: var(--rh-space-xl, 24px);
  gap: var(--rh-space-md, 8px);
}
 
import '@rhds/elements/rh-avatar/rh-avatar.js';
 
<section id="plain-avatar">
  <rh-avatar name="John von Neumann" subtitle="Mathematician" plain=""></rh-avatar>
  <rh-avatar name="Grace Hopper" subtitle="Rear Admiral" src="hopper.jpg" plain=""></rh-avatar>
  <rh-avatar name="Haskell Curry" subtitle="Computer Scientist" pattern="squares" plain=""></rh-avatar>
  <rh-avatar name="Edsger Dijkstra" subtitle="Computer Scientist" pattern="triangles" plain=""></rh-avatar>
</section>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <section id="plain-avatar">
    <Avatar name="John von Neumann" subtitle="Mathematician" plain />
    <Avatar name="Grace Hopper" subtitle="Rear Admiral" src="hopper.jpg" plain />
    <Avatar name="Haskell Curry" subtitle="Computer Scientist" pattern="squares" plain />
    <Avatar name="Edsger Dijkstra" subtitle="Computer Scientist" pattern="triangles" plain />
  </section>
);

Sizes

Avatars at different sizes using the --rh-avatar-size custom property with various --rh-size-icon-* design tokens, including the maximum size cap.

figure,
figcaption {
  margin-block-end: 1rem;
}
 
import '@rhds/elements/rh-avatar/rh-avatar.js';
 
<figure>
  <figcaption><code>--rh-size-icon-03</code></figcaption>
  <rh-avatar name="Radia Perlman" subtitle="Mother of the Internet" src="perlman.jpg" style="--rh-avatar-size:var(--rh-size-icon-03, 32px);">
  </rh-avatar>
</figure>

<figure>
  <figcaption><code>--rh-size-icon-05</code></figcaption>
  <rh-avatar src="moore.png" name="Gordon Moore" style="--rh-avatar-size:var(--rh-size-icon-05, 48px);">
    <span slot="subtitle">Co-founder, <em>Intel</em></span>
  </rh-avatar>
</figure>

<figure>
  <figcaption><code>--rh-size-icon-06</code> <small>(default)</small></figcaption>
  <rh-avatar src="johnson.jpg" name="Katherine Johnson" subtitle="Recipient, National Medal of Freedom 2016">
  </rh-avatar>
</figure>

<figure>
  <figcaption>
    <code>--rh-size-icon-08</code>
    <small>Avatars cannot be larger than <code>--rh-size-icon-06</code></small>
  </figcaption>
  <rh-avatar name="Hedy Lamarr" src="lamarr.jpg" subtitle="Jewish actress and inventor" style="--rh-avatar-size:var(--rh-size-icon-08, 96px);"></rh-avatar>
</figure>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <figure>
    <figcaption><code>--rh-size-icon-03</code></figcaption>
    <Avatar name="Radia Perlman" subtitle="Mother of the Internet" src="perlman.jpg" style="--rh-avatar-size:var(--rh-size-icon-03, 32px);" />
  </figure>
  <figure>
    <figcaption><code>--rh-size-icon-05</code></figcaption>
    <Avatar src="moore.png" name="Gordon Moore" style="--rh-avatar-size:var(--rh-size-icon-05, 48px);"><span slot="subtitle">Co-founder,<em>Intel</em></span></Avatar>
  </figure>
  <figure>
    <figcaption><code>--rh-size-icon-06</code><small>(default)</small></figcaption>
    <Avatar src="johnson.jpg" name="Katherine Johnson" subtitle="Recipient, National Medal of Freedom 2016" />
  </figure>
  <figure>
    <figcaption>
      <code>--rh-size-icon-08</code>
      <small>Avatars cannot be larger than<code>--rh-size-icon-06</code></small>
    </figcaption>
    <Avatar name="Hedy Lamarr" src="lamarr.jpg" subtitle="Jewish actress and inventor" style="--rh-avatar-size:var(--rh-size-icon-08, 96px);" />
  </figure>
);

Subtitles

Avatar with a long, multi-line subtitle slotted via a span element, demonstrating text wrapping behavior.

import '@rhds/elements/rh-avatar/rh-avatar.js';
 
<rh-avatar src="schoenfinkel.jpg">Moses Schoenfinkle
  <span slot="subtitle">
    Inventor of Combinatorics,
    often uncreditted for inventing the process of "currying" functions,
    however, "schoenfinkling" doesn't exactly roll off the tongue, so we'll
    let it slide
  </span>
</rh-avatar>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Avatar src="schoenfinkel.jpg">
    Moses Schoenfinkle
    <span slot="subtitle">Inventor of Combinatorics,
      often uncreditted for inventing the process of "currying" functions,
      however, "schoenfinkling" doesn't exactly roll off the tongue, so we'll
      let it slide</span>
  </Avatar>
);

Variants

Bordered variant avatars showing the subtle border treatment on both a default silhouette and a custom image.

#bordered-avatars {
  display: flex;
  padding: var(--rh-space-xl, 24px);
  gap: var(--rh-space-lg, 16px);
}
 
import '@rhds/elements/rh-avatar/rh-avatar.js';
 
<section id="bordered-avatars">
  <rh-avatar name="Bordered von Neumann" subtitle="Mathematician" variant="bordered"></rh-avatar>
  <rh-avatar name="Grace Bordered Jr." subtitle="Rear Admiral" src="hopper.jpg" variant="bordered"></rh-avatar>
</section>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <section id="bordered-avatars">
    <Avatar name="Bordered von Neumann" subtitle="Mathematician" variant="bordered" />
    <Avatar name="Grace Bordered Jr." subtitle="Rear Admiral" src="hopper.jpg" variant="bordered" />
  </section>
);

Avatar

Default avatar with a custom image source, name, and subtitle, plus a CSS ::part(img) override for image positioning.

rh-avatar::part(img) {
  object-position: top;
}
 
import '@rhds/elements/rh-avatar/rh-avatar.js';
 
<rh-avatar name="Omar Khayyam" subtitle="Mathematician, Astronomer" src="khayyam.jpg"></rh-avatar>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Avatar name="Omar Khayyam" subtitle="Mathematician, Astronomer" src="khayyam.jpg" />
);

Color Context

Avatars rendered inside an rh-context-demo to show behavior across light and dark color schemes, including slotted content, plain variants, custom images, and generated patterns.

import '@rhds/elements/rh-avatar/rh-avatar.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
 
<rh-context-demo>
  <rh-avatar>George Boole
    <span slot="subtitle">Professor of Mathematics, </span>
    <a slot="subtitle" href="https://www.wikiwand.com/en/Queen's_College,_Cork">Queen's College, Cork</a>
  </rh-avatar>
  <rh-avatar name="John von Neumann" subtitle="Mathematician" plain=""></rh-avatar>
  <rh-avatar name="Grace Hopper" subtitle="Rear Admiral" src="hopper.jpg" plain=""></rh-avatar>
  <rh-avatar name="Haskell Curry" subtitle="Computer Scientist" pattern="squares" plain=""></rh-avatar>
  <rh-avatar name="Edsger Dijkstra" subtitle="Computer Scientist" pattern="triangles" plain=""></rh-avatar>
</rh-context-demo>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";
import { ContextDemo } from "@rhds/elements/react/rh-context-demo/rh-context-demo.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ContextDemo>
    <Avatar>
      George Boole
      <span slot="subtitle">Professor of Mathematics,</span>
      <a slot="subtitle" href="https://www.wikiwand.com/en/Queen's_College,_Cork">Queen's College, Cork</a>
    </Avatar>
    <Avatar name="John von Neumann" subtitle="Mathematician" plain />
    <Avatar name="Grace Hopper" subtitle="Rear Admiral" src="hopper.jpg" plain />
    <Avatar name="Haskell Curry" subtitle="Computer Scientist" pattern="squares" plain />
    <Avatar name="Edsger Dijkstra" subtitle="Computer Scientist" pattern="triangles" plain />
  </ContextDemo>
);

Layout Block

Avatar using the block layout, which stacks the thumbnail above the name and subtitle text.

import '@rhds/elements/rh-avatar/rh-avatar.js';
 
<rh-avatar name="John von Neumann" subtitle="Mathematician" layout="block"></rh-avatar>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Avatar name="John von Neumann" subtitle="Mathematician" layout="block" />
);

Layout Inline

Avatar using the inline layout, which places the thumbnail beside the name and subtitle text.

import '@rhds/elements/rh-avatar/rh-avatar.js';
 
<rh-avatar name="Grace Hopper" subtitle="Rear Admiral" src="hopper.jpg" layout="inline"></rh-avatar>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Avatar name="Grace Hopper" subtitle="Rear Admiral" src="hopper.jpg" layout="inline" />
);

Layouts In Narrow Containers

Inline bordered avatars with linked names in a narrow container, demonstrating text wrapping and layout toggle.

#test {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--rh-space-xl, 24px);
  padding: var(--rh-space-xl, 24px);
  justify-content: space-between;
  flex-wrap: wrap;
  max-inline-size: 450px;

  &.repro {
    max-inline-size: 250px;
  }
}

rh-avatar {
  --rh-avatar-size: var(--rh-length-3xl, 48px);
  --rh-color-surface-darker: var(--rh-color-purple-70, #21134d);
  --rh-color-border-subtle: var(--rh-color-brand-red, light-dark(var(--rh-color-brand-red-on-light, #ee0000), var(--rh-color-brand-red-on-dark, #ee0000)));
  --rh-color-text-secondary: --var(--rh-color-accent-base, light-dark(var(--rh-color-accent-base-on-light, #0066cc), var(--rh-color-accent-base-on-dark, #92c5f9)));
  --rh-color-interactive-primary-default-on-dark: var(--rh-color-accent-base, light-dark(var(--rh-color-accent-base-on-light, #0066cc), var(--rh-color-accent-base-on-dark, #92c5f9)));
  --rh-color-interactive-primary-visited-default-on-dark: var(--rh-color-accent-base, light-dark(var(--rh-color-accent-base-on-light, #0066cc), var(--rh-color-accent-base-on-dark, #92c5f9)));
  --rh-color-interactive-primary-hover-on-dark: var(--rh-color-accent);
  --rh-border-width-sm: var(--rh-length-xs, 4px);

  padding: var(--rh-space-lg, 16px);
  background-color: var(--rh-color-surface-darker, #1f1f1f);
  color-scheme: dark only;
  border-radius: var(--rh-border-radius-pill, 64px);
}
 
import "@rhds/elements/rh-avatar/rh-avatar.js";
import "@rhds/elements/rh-switch/rh-switch.js";
const repro = document.getElementById('repro');
const test = document.getElementById('test');
repro.addEventListener('change', function () {
  test.classList.toggle('repro');
});
 
<div id="test">
  <label for="repro">
    <rh-switch id="repro"></rh-switch>
    Toggle reproduction
  </label>

  <rh-avatar layout="inline" variant="bordered">
    <a href="/en/authors/ana-biazetti">
      Ana Biazetti
    </a>
    <a slot="subtitle" href="/en/authors/ana-biazetti">
      Senior Principal Engineer, Red Hat AI
    </a>
  </rh-avatar>
  <rh-avatar layout="inline" variant="bordered">
    <a href="/en/authors/lindani-phiri">
      Lindani Phiri
    </a>
    <a slot="subtitle" href="/en/authors/lindani-phiri">
      Architect, Red Hat AI
    </a>
  </rh-avatar>
</div>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";
import { Switch } from "@rhds/elements/react/rh-switch/rh-switch.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <div id="test">
    <label htmlFor="repro">
      <Switch id="repro" />
      Toggle reproduction
    </label>
    <Avatar layout="inline" variant="bordered">
      <a href="/en/authors/ana-biazetti">Ana Biazetti</a>
      <a slot="subtitle" href="/en/authors/ana-biazetti">Senior Principal Engineer, Red Hat AI</a>
    </Avatar>
    <Avatar layout="inline" variant="bordered">
      <a href="/en/authors/lindani-phiri">Lindani Phiri</a>
      <a slot="subtitle" href="/en/authors/lindani-phiri">Architect, Red Hat AI</a>
    </Avatar>
  </div>
);

Avatars with anchor elements slotted in the name and subtitle slots, demonstrating interactive link color styles.

figure,
figcaption {
  margin-block-end: 1rem;
}
 
import '@rhds/elements/rh-avatar/rh-avatar.js';
 
<figure>
  <figcaption>Links applied to Name</figcaption>
  <rh-avatar src="wing.jpg">
    <a href="https://www.wikiwand.com/en/Jeannette_Wing">Jeannette Wing</a>
    <span slot="subtitle">Avanessians Director of the Data Science Institute, Columbia University</span>
  </rh-avatar>
</figure>

<figure>
  <figcaption>Links applied to job details</figcaption>
  <rh-avatar src="boole.jpg">George Boole
    <span slot="subtitle">Professor of Mathematics, </span>
    <a slot="subtitle" href="https://www.wikiwand.com/en/Queen's_College,_Cork">Queen's College, Cork</a>
  </rh-avatar>
</figure>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <figure>
    <figcaption>Links applied to Name</figcaption>
    <Avatar src="wing.jpg">
      <a href="https://www.wikiwand.com/en/Jeannette_Wing">Jeannette Wing</a>
      <span slot="subtitle">Avanessians Director of the Data Science Institute, Columbia University</span>
    </Avatar>
  </figure>
  <figure>
    <figcaption>Links applied to job details</figcaption>
    <Avatar src="boole.jpg">
      George Boole
      <span slot="subtitle">Professor of Mathematics,</span>
      <a slot="subtitle" href="https://www.wikiwand.com/en/Queen's_College,_Cork">Queen's College, Cork</a>
    </Avatar>
  </figure>
);

Pattern

Generated geometric patterns (squares and triangles) that are deterministically derived from the user's name.

figure,
figcaption {
  margin-block-end: 1rem;
}
 
import '@rhds/elements/rh-avatar/rh-avatar.js';
 
<figure>
  <figcaption>Squares pattern</figcaption>
  <rh-avatar name="Alonzo Church" subtitle="Inventor of the Lambda Calculus" pattern="squares"></rh-avatar>
</figure>

<figure>
  <figcaption>Triangles pattern</figcaption>
  <rh-avatar name="Alan Turing" subtitle="Cryptographer" pattern="triangles"></rh-avatar>
</figure>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <figure>
    <figcaption>Squares pattern</figcaption>
    <Avatar name="Alonzo Church" subtitle="Inventor of the Lambda Calculus" pattern="squares" />
  </figure>
  <figure>
    <figcaption>Triangles pattern</figcaption>
    <Avatar name="Alan Turing" subtitle="Cryptographer" pattern="triangles" />
  </figure>
);

Plain

Plain variant avatars showing thumbnail-only display (name and subtitle visually hidden) for default icon, custom image, squares pattern, and triangles pattern.

#plain-avatar {
  display: flex;
  padding: var(--rh-space-xl, 24px);
  gap: var(--rh-space-md, 8px);
}
 
import '@rhds/elements/rh-avatar/rh-avatar.js';
 
<section id="plain-avatar">
  <rh-avatar name="John von Neumann" subtitle="Mathematician" plain=""></rh-avatar>
  <rh-avatar name="Grace Hopper" subtitle="Rear Admiral" src="hopper.jpg" plain=""></rh-avatar>
  <rh-avatar name="Haskell Curry" subtitle="Computer Scientist" pattern="squares" plain=""></rh-avatar>
  <rh-avatar name="Edsger Dijkstra" subtitle="Computer Scientist" pattern="triangles" plain=""></rh-avatar>
</section>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <section id="plain-avatar">
    <Avatar name="John von Neumann" subtitle="Mathematician" plain />
    <Avatar name="Grace Hopper" subtitle="Rear Admiral" src="hopper.jpg" plain />
    <Avatar name="Haskell Curry" subtitle="Computer Scientist" pattern="squares" plain />
    <Avatar name="Edsger Dijkstra" subtitle="Computer Scientist" pattern="triangles" plain />
  </section>
);

Sizes

Avatars at different sizes using the --rh-avatar-size custom property with various --rh-size-icon-* design tokens, including the maximum size cap.

figure,
figcaption {
  margin-block-end: 1rem;
}
 
import '@rhds/elements/rh-avatar/rh-avatar.js';
 
<figure>
  <figcaption><code>--rh-size-icon-03</code></figcaption>
  <rh-avatar name="Radia Perlman" subtitle="Mother of the Internet" src="perlman.jpg" style="--rh-avatar-size:var(--rh-size-icon-03, 32px);">
  </rh-avatar>
</figure>

<figure>
  <figcaption><code>--rh-size-icon-05</code></figcaption>
  <rh-avatar src="moore.png" name="Gordon Moore" style="--rh-avatar-size:var(--rh-size-icon-05, 48px);">
    <span slot="subtitle">Co-founder, <em>Intel</em></span>
  </rh-avatar>
</figure>

<figure>
  <figcaption><code>--rh-size-icon-06</code> <small>(default)</small></figcaption>
  <rh-avatar src="johnson.jpg" name="Katherine Johnson" subtitle="Recipient, National Medal of Freedom 2016">
  </rh-avatar>
</figure>

<figure>
  <figcaption>
    <code>--rh-size-icon-08</code>
    <small>Avatars cannot be larger than <code>--rh-size-icon-06</code></small>
  </figcaption>
  <rh-avatar name="Hedy Lamarr" src="lamarr.jpg" subtitle="Jewish actress and inventor" style="--rh-avatar-size:var(--rh-size-icon-08, 96px);"></rh-avatar>
</figure>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <figure>
    <figcaption><code>--rh-size-icon-03</code></figcaption>
    <Avatar name="Radia Perlman" subtitle="Mother of the Internet" src="perlman.jpg" style="--rh-avatar-size:var(--rh-size-icon-03, 32px);" />
  </figure>
  <figure>
    <figcaption><code>--rh-size-icon-05</code></figcaption>
    <Avatar src="moore.png" name="Gordon Moore" style="--rh-avatar-size:var(--rh-size-icon-05, 48px);"><span slot="subtitle">Co-founder,<em>Intel</em></span></Avatar>
  </figure>
  <figure>
    <figcaption><code>--rh-size-icon-06</code><small>(default)</small></figcaption>
    <Avatar src="johnson.jpg" name="Katherine Johnson" subtitle="Recipient, National Medal of Freedom 2016" />
  </figure>
  <figure>
    <figcaption>
      <code>--rh-size-icon-08</code>
      <small>Avatars cannot be larger than<code>--rh-size-icon-06</code></small>
    </figcaption>
    <Avatar name="Hedy Lamarr" src="lamarr.jpg" subtitle="Jewish actress and inventor" style="--rh-avatar-size:var(--rh-size-icon-08, 96px);" />
  </figure>
);

Subtitles

Avatar with a long, multi-line subtitle slotted via a span element, demonstrating text wrapping behavior.

import '@rhds/elements/rh-avatar/rh-avatar.js';
 
<rh-avatar src="schoenfinkel.jpg">Moses Schoenfinkle
  <span slot="subtitle">
    Inventor of Combinatorics,
    often uncreditted for inventing the process of "currying" functions,
    however, "schoenfinkling" doesn't exactly roll off the tongue, so we'll
    let it slide
  </span>
</rh-avatar>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Avatar src="schoenfinkel.jpg">
    Moses Schoenfinkle
    <span slot="subtitle">Inventor of Combinatorics,
      often uncreditted for inventing the process of "currying" functions,
      however, "schoenfinkling" doesn't exactly roll off the tongue, so we'll
      let it slide</span>
  </Avatar>
);

Variants

Bordered variant avatars showing the subtle border treatment on both a default silhouette and a custom image.

#bordered-avatars {
  display: flex;
  padding: var(--rh-space-xl, 24px);
  gap: var(--rh-space-lg, 16px);
}
 
import '@rhds/elements/rh-avatar/rh-avatar.js';
 
<section id="bordered-avatars">
  <rh-avatar name="Bordered von Neumann" subtitle="Mathematician" variant="bordered"></rh-avatar>
  <rh-avatar name="Grace Bordered Jr." subtitle="Rear Admiral" src="hopper.jpg" variant="bordered"></rh-avatar>
</section>
 
import { Avatar } from "@rhds/elements/react/rh-avatar/rh-avatar.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <section id="bordered-avatars">
    <Avatar name="Bordered von Neumann" subtitle="Mathematician" variant="bordered" />
    <Avatar name="Grace Bordered Jr." subtitle="Rear Admiral" src="hopper.jpg" variant="bordered" />
  </section>
);
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify