Primitive
Avatar CSS-only
User photos, initials, and presence indicators. Six sizes, square / round, with optional online / offline / busy status dot.
About
Overview
Avatars represent people or entities. They handle the messy details: image fallback when the photo fails to load, initials when there's no photo, status dots for presence.
Live
Demo
JD
AB
CD
EF
<img class="ren-avatar ren-avatar-md" src="/u/ren.jpg" alt="Ren">
<span class="ren-avatar ren-avatar-md">JD</span> <!-- initials fallback -->Reference
API
| Class | Effect |
|---|---|
.ren-avatar | Base. Works on <img> or any element holding initials. |
.ren-avatar-xs / -sm / -md / -lg / -xl / -2xl | Sizes from 24 px to 64 px. |
.ren-avatar-square | Rounded-square instead of circle. |
.ren-avatar-status | Wrapper that positions a presence dot at the bottom-right. |
Inclusive by default
Accessibility
- Image avatars need
alt="{Person name}". The avatar is functionally a label. - Initials avatars use
aria-labelwith the full name (initials alone don't identify a person to a screen reader). - Status dots are decorative — the status word should appear elsewhere in the row.