Avatars

Avatars are used to wrap and stylize entity images. They can be alone or multiple and may come with a badge in some cases.

Examples

Basic Avatar

Use the .ro-avatar class as a container for an image. The default shape is a square and the default size is 40px (equivalent to xl).

<div class="ro-avatar">
<img class="ro-avatar_img" alt="Avatar" src="https://i.pravatar.cc/150?img=32"/>
</div>

Preview

Initials

To display initials instead of an image, add the .ro-initials class. The text should be placed inside the .ro-avatar_img element.

<div class="ro-avatar ro-initials ro-shape-circle ro-size-lg">
<div class="ro-avatar_img" title="John Doe">JD</div>
</div>

Preview

JD

Sizing

Use .ro-size-* to adjust the size. The available sizes range from 16px (xs) to 100px (5xl).

<div class="ro-stack">
  <div class="ro-avatar ro-shape-circle ro-size-xs">
    <img class="ro-avatar_img" alt="Avatar" src="https://i.pravatar.cc/150?img=1"/>
  </div>
  <div class="ro-avatar ro-shape-circle ro-size-sm">
    <img class="ro-avatar_img" alt="Avatar" src="https://i.pravatar.cc/150?img=2"/>
  </div>
  <div class="ro-avatar ro-shape-circle ro-size-md">
    <img class="ro-avatar_img" alt="Avatar" src="https://i.pravatar.cc/150?img=3"/>
  </div>
  <div class="ro-avatar ro-shape-circle ro-size-lg">
    <img class="ro-avatar_img" alt="Avatar" src="https://i.pravatar.cc/150?img=4"/>
  </div>
  <div class="ro-avatar ro-shape-circle ro-size-xl">
    <img class="ro-avatar_img" alt="Avatar" src="https://i.pravatar.cc/150?img=5"/>
  </div>
  <div class="ro-avatar ro-shape-circle ro-size-2xl">
    <img class="ro-avatar_img" alt="Avatar" src="https://i.pravatar.cc/150?img=6"/>
  </div>
  <div class="ro-avatar ro-shape-circle ro-size-3xl">
    <img class="ro-avatar_img" alt="Avatar" src="https://i.pravatar.cc/150?img=7"/>
  </div>
  <div class="ro-avatar ro-shape-circle ro-size-4xl">
    <img class="ro-avatar_img" alt="Avatar" src="https://i.pravatar.cc/150?img=8"/>
  </div>
  <div class="ro-avatar ro-shape-circle ro-size-5xl">
    <img class="ro-avatar_img" alt="Avatar" src="https://i.pravatar.cc/150?img=9"/>
  </div>
</div>

Preview

XS

SM

MD

LG

XL

2XL

3XL

4XL

5XL

Shape

Use .ro-shape-rounded (medium radius) or .ro-shape-circle (50% radius) to change the avatar’s shape.

<div class="ro-stack">
  <div class="ro-avatar ro-shape-rounded ro-size-xl">
    <img class="ro-avatar_img" alt="Avatar" src="https://i.pravatar.cc/150?img=11"/>
  </div>
  <div class="ro-avatar ro-shape-circle ro-size-xl">
    <img class="ro-avatar_img" alt="Avatar" src="https://i.pravatar.cc/150?img=12"/>
  </div>
</div>

Preview

Border Width

Use .ro-border for a single border or .ro-border-2 for a double border (outline effect).

<div class="ro-stack">
  <div class="ro-avatar ro-shape-circle ro-size-xl ro-border">
      <img class="ro-avatar_img" alt="Avatar" src="https://i.pravatar.cc/150?img=14"/>
  </div>
  <div class="ro-avatar ro-shape-circle ro-size-xl ro-border-2">
      <img class="ro-avatar_img" alt="Avatar" src="https://i.pravatar.cc/150?img=15"/>
  </div>
</div>

Preview

Border Color

Combine a border class with .ro-color-scheme-* to change the border color. The supported schemes are product and danger.

<div class="ro-stack">
  <div class="ro-avatar ro-shape-circle ro-size-xl ro-border-2 ro-color-scheme-product">
    <img class="ro-avatar_img" alt="Avatar" src="https://i.pravatar.cc/150?img=21"/>
  </div>
  <div class="ro-avatar ro-shape-circle ro-size-xl ro-border-2 ro-color-scheme-danger">
    <img class="ro-avatar_img" alt="Avatar" src="https://i.pravatar.cc/150?img=22"/>
  </div>
</div>

Preview

Image Fit

Use .ro-fit-contain to ensure the entire image is visible within the avatar boundaries. The default behavior is cover (fill).

<div class="ro-stack">
  <div class="ro-avatar ro-shape-rounded ro-size-5xl ro-border ro-fit-cover">
    <img class="ro-avatar_img" alt="Rectangular placeholder" src="https://placehold.co/600x400"/>
  </div>
  <div class="ro-avatar ro-shape-rounded ro-size-5xl ro-border ro-fit-contain">
    <img class="ro-avatar_img" alt="Rectangular placeholder" src="https://placehold.co/600x400"/>
  </div>
</div>

Preview

Avatar Group

To stack multiple avatars, wrap them in a container with the .ro-avatar-group class. Add .ro-hover-fx to enable a scaling hover effect.

<div class="ro-avatar-group ro-hover-fx">
  <div class="ro-avatar ro-shape-circle ro-initials">
    <div class="ro-avatar_img" title="Plus 3">+3</div>
  </div>
  <div class="ro-avatar ro-shape-circle">
    <img class="ro-avatar_img" alt="Avatar" src="https://i.pravatar.cc/150?img=2"/>
  </div>
  <div class="ro-avatar ro-shape-circle">
    <img class="ro-avatar_img" alt="Avatar" src="https://i.pravatar.cc/150?img=1"/>
  </div>
</div>

Preview

+3

---

Deprecated Variants

The following color schemes were previously supported but are no longer present in the active stylesheets. They may still work if legacy styles are loaded but should be avoided for new development.

• info
• success
• warning

Properties

.ro-avatar

Property	Default	Description
.ro-size-*	xl (40px)	xs (16px) | sm (20px) | md (24px) | lg (32px) | xl (40px) | 2xl (48px) | 3xl (64px) | 4xl (80px) | 5xl (100px)
.ro-initials		Styles content as text initials.
.ro-shape-*	(square)	rounded | circle
.ro-border-*	(none)	ro-border (single) | ro-border-2 (double)
.ro-color-scheme-*	(inherit)	product | danger. Deprecated: info, success, warning
.ro-fit-*	cover	contain | cover

.ro-avatar-group

Property	Default	Description
.ro-hover-fx	(none)	Adds a scaling effect on hover to avatars within a group.