Overview

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

Demo

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

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

<style>
rh-avatar::part(img) {
object-position: top;
}
</style>

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

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