avatar
Image with text fallback. Sizes, ring, square, group.
Preview
Markup
<div class="avatar"><img src="…" alt="…"></div>Install
Import the component CSS (depends on base/tokens.css):
@import "@russfranky/shadcss/src/components/avatar.css";
…or copy it into your repo with the CLI:
npx @russfranky/shadcss-cli add avatar
Accessibility
img alt; image-error fallback needs a one-line onerror
Classes
.avatar .avatar-sm .avatar-lg .avatar-xl .avatar-square .avatar-ring .avatar-group
Dependencies
base/tokens