Avatar — Vanilla

Avatar with vanilla HTML. Ensure Rizzo CSS is loaded.

Avatar

User avatar with initials or image. Sizes: avatar--sm, avatar--md, avatar--lg. Shape: avatar--circle, avatar--square.

Live example

HTML

html html 
<span class="avatar avatar--md avatar--circle" role="img" aria-label="Avatar: JD">
  <span class="avatar__initials" aria-hidden="true">JD</span>
</span>
<span class="avatar avatar--sm avatar--circle" role="img" aria-label="Avatar: AB"><span class="avatar__initials" aria-hidden="true">AB</span></span>
<span class="avatar avatar--lg avatar--square" role="img" aria-label="Avatar: XY"><span class="avatar__initials" aria-hidden="true">XY</span></span>
<!-- With image: <img class="avatar__img" src="..." alt="..." /> inside the span -->

Astro / Svelte: Astro · Svelte