Red Hat design system

Overview

An avatar is a small thumbnail representation of a user.

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>