Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographyInteractionsSpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardTabsFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTileVideo thumbnail
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Avatar

OverviewStyleGuidelinesCodeAccessibilityDemos
AvatarColor ContextLinksPatternPlainPositionSizesSubtitlesAvatarColor ContextLinksPatternPlainPositionSizesSubtitles

Avatar

rh-avatar::part(img) {
  object-position: top;
}
```
import '@rhds/elements/rh-avatar/rh-avatar.js';
```
<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>
```

Color Context

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="https://ux.redhat.com/elements/avatar/demo/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>
```
figure {
  display: grid;
  grid-template: min-content 1fr / repeat(5, 1fr);
  grid-auto-flow: column;
  gap: var(--rh-space-lg, 16px);
}
figcaption {
  grid-column: -1/1;
}
```
import '@rhds/elements/rh-avatar/rh-avatar.js';
```
<figure>
  <figcaption>Links applied to Name</figcaption>
  <rh-avatar src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Jeannette_Wing%2C_Davos_2013.jpg/330px-Jeannette_Wing%2C_Davos_2013.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="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/George_Boole_color.jpg/330px-George_Boole_color.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>
```

Pattern

figure {
  display: grid;
  grid-template: min-content 1fr / repeat(5, 1fr);
  grid-auto-flow: column;
  gap: var(--rh-space-lg, 16px);
}
figcaption {
  grid-column: -1/1;
}
```
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>
```

Plain

#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="https://ux.redhat.com/elements/avatar/demo/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>
```

Position

import '@rhds/elements/rh-avatar/rh-avatar.js';
```
<rh-avatar name="Ada Lovelace" subtitle="Computer Programmer" layout="block"></rh-avatar>
```

Sizes

figure {
  display: grid;
  grid-template: min-content 1fr / repeat(5, 1fr);
  grid-auto-flow: column;
  gap: var(--rh-space-lg, 16px);
}
figcaption {
  grid-column: -1/1;
}
```
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="https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Radia_Perlman_2009.jpg/330px-Radia_Perlman_2009.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="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Gordon_Moore_1978_%28cropped%29.png/330px-Gordon_Moore_1978_%28cropped%29.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="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Katherine_Johnson_1983.jpg/330px-Katherine_Johnson_1983.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="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Hedy_Lamarr_Publicity_Photo_for_The_Heavenly_Body_1944.jpg/330px-Hedy_Lamarr_Publicity_Photo_for_The_Heavenly_Body_1944.jpg" subtitle="Jewish actress and inventor" style="--rh-avatar-size:var(--rh-size-icon-08, 96px);"></rh-avatar>
</figure>
```

Subtitles

import '@rhds/elements/rh-avatar/rh-avatar.js';
```
<rh-avatar src="https://ux.redhat.com/elements/avatar/demo/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>
```
© 2021-2025 Red Hat, Inc. Deploys by Netlify