Avatar

Initials in a circle. Images cover; broken images fall back to initials. Rows overlap.

RVNO+3

Install

npx raster add avatar

Markup

<div class="rs-avatar-row"><span class="rs-avatar">RV</span><span class="rs-avatar">NO</span><span class="rs-avatar">+3</span></div>

React

import { Avatar, AvatarRow } from "@/components/raster/avatar";

<Avatar src="/renn.jpg" alt="Renn" initials="RV" />
<AvatarRow>
  <Avatar initials="RV" />
  <Avatar initials="NO" />
  <Avatar initials="+3" />
</AvatarRow>

Classes

.rs-avatar.rs-avatar-sm.rs-avatar-lg.rs-avatar-row