An avatar is a small thumbnail representation of a user.

 Image of an avatar group with a photo of a woman and text

Sample element


View a live version of this element to see how it can be customized.

<rh-avatar name="Omar Khayyam"
subtitle="Mathematician, Astronomer"

rh-avatar::part(img) {
object-position: top;

<script type="module">
import '@rhds/elements/rh-avatar/rh-avatar.js';

View the demo

When to use

  • When you need to represent a user who has not provided a photo or image
© 2021-2024 Red Hat, Inc. Deploys by Netlify