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="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" />
);

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>
);

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" />
);

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" />
);

#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>
);

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>
);

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-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>
);

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>
);

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>
);

#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>
);