Avatars
Avatars are always circular. Use initials, a photo, or a placeholder — add .ro-avatar--placeholder and put a Ringover icon (for example user-people) or inline SVG inside .ro-avatar_img (same surface tokens as initials).
Examples
Section titled “Examples”Initials — sizes
Section titled “Initials — sizes”Add .ro-initials on .ro-avatar and place the text inside .ro-avatar_img. Use .ro-size-* to scale from 20px (2xs) to 108px (2xl); default is md (40px).
<div class="ro-stack"> <div class="ro-avatar ro-initials ro-size-2xs"> <div class="ro-avatar_img ro-initials">2XS</div> </div> <div class="ro-avatar ro-initials ro-size-xs"> <div class="ro-avatar_img ro-initials">XS</div> </div> <div class="ro-avatar ro-initials ro-size-sm"> <div class="ro-avatar_img ro-initials">SM</div> </div> <div class="ro-avatar ro-initials ro-size-md"> <div class="ro-avatar_img ro-initials">MD</div> </div> <div class="ro-avatar ro-initials ro-size-lg"> <div class="ro-avatar_img ro-initials">LG</div> </div> <div class="ro-avatar ro-initials ro-size-xl"> <div class="ro-avatar_img ro-initials">XL</div> </div> <div class="ro-avatar ro-initials ro-size-2xl"> <div class="ro-avatar_img ro-initials">2XL</div> </div></div>2XS
XS
SM
MD
LG
XL
2XL
Color schemes
Section titled “Color schemes”Add ro-color-scheme-<name> on the root .ro-avatar for the initials or placeholder surface. Omit it to keep the default grey surface. Schemes: grey, blue, green, yellow, orange, red, pink, purple, brown.
<div class="ro-stack"> <div class="ro-avatar ro-initials ro-size-xl ro-color-scheme-yellow"> <div class="ro-avatar_img ro-initials">YL</div> </div> <div class="ro-avatar ro-initials ro-size-xl ro-color-scheme-orange"> <div class="ro-avatar_img ro-initials">OR</div> </div> <div class="ro-avatar ro-initials ro-size-xl ro-color-scheme-brown"> <div class="ro-avatar_img ro-initials">BN</div> </div> <div class="ro-avatar ro-initials ro-size-xl ro-color-scheme-red"> <div class="ro-avatar_img ro-initials">RD</div> </div> <div class="ro-avatar ro-initials ro-size-xl ro-color-scheme-pink"> <div class="ro-avatar_img ro-initials">PK</div> </div> <div class="ro-avatar ro-initials ro-size-xl ro-color-scheme-purple"> <div class="ro-avatar_img ro-initials">PP</div> </div> <div class="ro-avatar ro-initials ro-size-xl ro-color-scheme-blue"> <div class="ro-avatar_img ro-initials">BL</div> </div> <div class="ro-avatar ro-initials ro-size-xl ro-color-scheme-green"> <div class="ro-avatar_img ro-initials">GR</div> </div> <div class="ro-avatar ro-initials ro-size-xl ro-color-scheme-grey"> <div class="ro-avatar_img ro-initials">GY</div> </div></div>YL
OR
BN
RD
PK
PP
BL
GR
GY
Photos
Section titled “Photos”Use .ro-avatar with an <img class="ro-avatar_img"> child. Border radius defaults to a circle (--ro-radii-circle).
<div class="ro-stack"> <div class="ro-avatar ro-size-xl"> <img class="ro-avatar_img" alt="" src="https://i.pravatar.cc/150?img=32"/> </div> <div class="ro-avatar ro-size-xl"> <img class="ro-avatar_img" alt="" src="https://i.pravatar.cc/150?img=33"/> </div> <div class="ro-avatar ro-size-xl"> <img class="ro-avatar_img" alt="" src="https://i.pravatar.cc/150?img=34"/> </div> <div class="ro-avatar ro-size-xl"> <img class="ro-avatar_img" alt="" src="https://i.pravatar.cc/150?img=35"/> </div> <div class="ro-avatar ro-size-2xl"> <img class="ro-avatar_img" alt="" src="https://i.pravatar.cc/150?img=36"/> </div></div>Borders
Section titled “Borders”Use .ro-border-basic for a single accent border or .ro-border-outlined for a double outline (white inner ring + accent outline). Aliases: .ro-border / .ro-border-1 (basic), .ro-border-2 (outlined).
<div class="ro-stack"> <div class="ro-avatar ro-border-basic ro-size-md"> <img class="ro-avatar_img" alt="" src="https://i.pravatar.cc/150?img=32"/> </div> <div class="ro-avatar ro-border-outlined ro-size-md"> <img class="ro-avatar_img" alt="" src="https://i.pravatar.cc/150?img=33"/> </div></div>Placeholders
Section titled “Placeholders”When there is no image or initials, add .ro-avatar--placeholder and put an icon or SVG inside .ro-avatar_img. Examples below use a person icon and a company SVG at md.
<div class="ro-stack"> <div class="ro-avatar ro-avatar--placeholder ro-size-md"> <div class="ro-avatar_img"> <i class="ro-icon ro-icon-user-people"></i> </div> </div> <div class="ro-avatar ro-avatar--placeholder ro-size-md"> <div class="ro-avatar_img"> <!-- Inline SVG placeholder (company) --> </div> </div></div>States
Section titled “States”Add .ro-hoverable for a pointer cursor and accent ring on hover. Add .ro-selected for a persistent accent outline. Hover ring is suppressed when .ro-border-outlined is set.
<div class="ro-avatar ro-size-xl ro-initials ro-selected"> <div class="ro-avatar_img ro-initials">SL</div></div><div class="ro-avatar ro-size-xl ro-hoverable"> <img class="ro-avatar_img" alt="" src="https://i.pravatar.cc/150?img=32"/></div>SL
Avatar groups
Section titled “Avatar groups”Wrap multiple avatars in .ro-avatar-group. Avatars overlap horizontally (right-to-left stack). Add .ro-hover-fx to scale avatars on hover.
Default
Section titled “Default”<div class="ro-avatar-group"> <div class="ro-avatar ro-size-xl ro-border-basic"> <img class="ro-avatar_img" alt="" src="https://i.pravatar.cc/150?img=32"/> </div> <div class="ro-avatar ro-size-xl ro-border-basic"> <img class="ro-avatar_img" alt="" src="https://i.pravatar.cc/150?img=33"/> </div> <div class="ro-avatar ro-size-xl ro-border-basic"> <img class="ro-avatar_img" alt="" src="https://i.pravatar.cc/150?img=34"/> </div> <div class="ro-avatar ro-size-xl ro-border-basic"> <img class="ro-avatar_img" alt="" src="https://i.pravatar.cc/150?img=35"/> </div></div>Hover effect
Section titled “Hover effect”<div class="ro-avatar-group ro-hover-fx"> <div class="ro-avatar ro-size-xl ro-border-basic"> <img class="ro-avatar_img" alt="" src="https://i.pravatar.cc/150?img=32"/> </div> <div class="ro-avatar ro-size-xl ro-border-basic"> <img class="ro-avatar_img" alt="" src="https://i.pravatar.cc/150?img=33"/> </div> <div class="ro-avatar ro-size-xl ro-border-basic"> <img class="ro-avatar_img" alt="" src="https://i.pravatar.cc/150?img=34"/> </div> <div class="ro-avatar ro-size-xl ro-border-basic"> <img class="ro-avatar_img" alt="" src="https://i.pravatar.cc/150?img=35"/> </div></div>Duo mode
Section titled “Duo mode”A special case of .ro-avatar-group for two overlapping avatars (conversations, shared entities). Add .ro-mode-duo and set the frame size with .ro-size-* on the group — not on each cell. Optional .ro-border-basic or .ro-border-outlined applies to the duo frame. Mix photo, initials, and placeholder cells as needed.
<div class="ro-stack"> <div class="ro-avatar-group ro-mode-duo ro-size-md"> <div class="ro-avatar"> <img class="ro-avatar_img" alt="" src="https://i.pravatar.cc/150?img=32"/> </div> <div class="ro-avatar"> <img class="ro-avatar_img" alt="" src="https://i.pravatar.cc/150?img=33"/> </div> </div> <div class="ro-avatar-group ro-mode-duo ro-size-md"> <div class="ro-avatar"> <img class="ro-avatar_img" alt="" src="https://i.pravatar.cc/150?img=32"/> </div> <div class="ro-avatar ro-initials ro-color-scheme-blue"> <div class="ro-avatar_img ro-initials">MP</div> </div> </div> <div class="ro-avatar-group ro-mode-duo ro-size-md"> <div class="ro-avatar ro-initials"> <div class="ro-avatar_img ro-initials">PE</div> </div> <div class="ro-avatar ro-initials ro-color-scheme-blue"> <div class="ro-avatar_img ro-initials">MP</div> </div> </div> <div class="ro-avatar-group ro-mode-duo ro-size-md"> <div class="ro-avatar ro-initials"> <div class="ro-avatar_img ro-initials">PE</div> </div> <div class="ro-avatar ro-avatar--placeholder"> <div class="ro-avatar_img"> <i class="ro-icon ro-icon-user-people"></i> </div> </div> </div></div>MP
PE
MP
PE
Sticker mode
Section titled “Sticker mode”Wrap the avatar in .ro-sticker.ro-avatar-sticker sized with .ro-size-* on the sticker. Use .ro-sticker-item.ro-bottom-right for a status badge (disconnected, incall, snooze, available) and .ro-sticker-item.ro-top-right for a danger count badge. See Stickers for general sticker markup.
Notification and status
Section titled “Notification and status”Wrap the avatar in .ro-sticker.ro-avatar-sticker and size the sticker with .ro-size-*. Badge sizes scale with the sticker frame (sm through 2xl).
<div class="ro-stack"> <div class="ro-sticker ro-avatar-sticker ro-size-sm"> <div class="ro-avatar ro-size-sm"> <img class="ro-avatar_img" alt="" src="https://i.pravatar.cc/150?img=32"/> </div> <div class="ro-sticker-item ro-top-right"> <div class="ro-badge ro-color-scheme-danger ro-size-xs">2</div> </div> <div class="ro-sticker-item ro-bottom-right"> <div class="ro-badge ro-variant-status ro-color-scheme-available ro-size-xs"></div> </div> </div> <div class="ro-sticker ro-avatar-sticker ro-size-md"> <div class="ro-avatar ro-size-md"> <img class="ro-avatar_img" alt="" src="https://i.pravatar.cc/150?img=32"/> </div> <div class="ro-sticker-item ro-top-right"> <div class="ro-badge ro-color-scheme-danger ro-size-sm">2</div> </div> <div class="ro-sticker-item ro-bottom-right"> <div class="ro-badge ro-variant-status ro-color-scheme-available ro-size-xs"></div> </div> </div> <div class="ro-sticker ro-avatar-sticker ro-size-lg"> <div class="ro-avatar ro-size-lg"> <img class="ro-avatar_img" alt="" src="https://i.pravatar.cc/150?img=32"/> </div> <div class="ro-sticker-item ro-top-right"> <div class="ro-badge ro-color-scheme-danger ro-size-md">2</div> </div> <div class="ro-sticker-item ro-bottom-right"> <div class="ro-badge ro-variant-status ro-color-scheme-available ro-size-sm"></div> </div> </div> <div class="ro-sticker ro-avatar-sticker ro-size-xl"> <div class="ro-avatar ro-size-xl"> <img class="ro-avatar_img" alt="" src="https://i.pravatar.cc/150?img=32"/> </div> <div class="ro-sticker-item ro-top-right"> <div class="ro-badge ro-color-scheme-danger ro-size-lg">2</div> </div> <div class="ro-sticker-item ro-bottom-right"> <div class="ro-badge ro-variant-status ro-color-scheme-available ro-size-md"></div> </div> </div> <div class="ro-sticker ro-avatar-sticker ro-size-2xl"> <div class="ro-avatar ro-size-2xl"> <img class="ro-avatar_img" alt="" src="https://i.pravatar.cc/150?img=32"/> </div> <div class="ro-sticker-item ro-top-right"> <div class="ro-badge ro-color-scheme-danger ro-size-xl">2</div> </div> <div class="ro-sticker-item ro-bottom-right"> <div class="ro-badge ro-variant-status ro-color-scheme-available ro-size-lg"></div> </div> </div></div>2
2
2
2
2
Status variants
Section titled “Status variants”<div class="ro-stack"> <div class="ro-sticker ro-avatar-sticker ro-size-xl"> <div class="ro-avatar ro-size-xl"> <img class="ro-avatar_img" alt="" src="https://i.pravatar.cc/150?img=32"/> </div> <div class="ro-sticker-item ro-bottom-right"> <div class="ro-badge ro-variant-status ro-size-md ro-color-scheme-disconnected"></div> </div> </div> <div class="ro-sticker ro-avatar-sticker ro-size-xl"> <div class="ro-avatar ro-size-xl"> <img class="ro-avatar_img" alt="" src="https://i.pravatar.cc/150?img=32"/> </div> <div class="ro-sticker-item ro-bottom-right"> <div class="ro-badge ro-variant-status ro-size-md ro-color-scheme-incall"></div> </div> </div> <div class="ro-sticker ro-avatar-sticker ro-size-xl"> <div class="ro-avatar ro-size-xl"> <img class="ro-avatar_img" alt="" src="https://i.pravatar.cc/150?img=32"/> </div> <div class="ro-sticker-item ro-bottom-right"> <div class="ro-badge ro-variant-status ro-size-md ro-color-scheme-snooze"></div> </div> </div> <div class="ro-sticker ro-avatar-sticker ro-size-xl"> <div class="ro-avatar ro-size-xl"> <img class="ro-avatar_img" alt="" src="https://i.pravatar.cc/150?img=32"/> </div> <div class="ro-sticker-item ro-bottom-right"> <div class="ro-badge ro-variant-status ro-size-md ro-color-scheme-available"></div> </div> </div></div>Deprecated Variants
Section titled “Deprecated Variants”The following patterns are deprecated or removed:
data-ro-size,data-ro-border,data-ro-fit,data-ro-initials,data-ro-placeholder,data-ro-color-schemeon avatars — use the matching.ro-*classes (see Migration guide).- Color schemes
product,danger,info,success,warningfor border tinting — borders use accent tokens via.ro-border-basic/.ro-border-outlined. .ro-shape-*on avatars — not defined in@ringover/styles; border radius comes from--ro-avatar-border-radius(default circle).
See the Migration guide.
Properties
Section titled “Properties”.ro-avatar
Section titled “.ro-avatar”| Property | Default | Description |
|---|---|---|
.ro-size-* | md (40px) | 2xs (20px) through 2xl (108px). See Migration guide. |
.ro-initials | Styles .ro-avatar_img as text initials. | |
.ro-avatar--placeholder | Icon or SVG placeholder when there is no image or initials. | |
.ro-avatar_img | Image, initials text, icon, or loading overlay cell. | |
.ro-avatar_placeholder | Loading overlay variant on .ro-avatar_img. | |
.ro-border-basic | (none) | Single accent border. Aliases: .ro-border, .ro-border-1. |
.ro-border-outlined | (none) | White inner ring + accent outline. Aliases: .ro-border-2. |
.ro-color-scheme-* | grey | Dynamic schemes for initials: grey, blue, green, yellow, orange, red, pink, purple, brown. |
.ro-fit-* | cover | contain | cover. |
.ro-hoverable | (none) | Pointer cursor; accent ring on hover. |
.ro-selected | (none) | Persistent accent outline. |
Border radius defaults to --ro-radii-circle. Override with a custom --ro-avatar-border-radius on the element if needed.
.ro-avatar-group
Section titled “.ro-avatar-group”| Property | Default | Description |
|---|---|---|
.ro-hover-fx | (none) | Scales avatars on hover within the group. |
.ro-count | (none) | Framed count layout; pair with .ro-avatar-group-count (full frame styling in RoAvatarGroup Vue component). |
.ro-mode-duo | (none) | Two overlapping avatars; set .ro-size-* and optional .ro-border-* on the group. |
.ro-avatar-group-count | (none) | Numeric label beside the group. |
Wrappers
Section titled “Wrappers”| Class | Description |
|---|---|
.ro-avatar-stack | Relative positioning wrapper for layered avatar content. |
.ro-avatar-sticker | Modifier on .ro-sticker for avatar-specific badge offsets. See Stickers. |
Changelog
Recent updates in @ringover/styles. See the full
package changelog
.
-
- Avatar group duo mode for conversations and groups.
- Sticker badge offsets for avatars.
-
- Reworked size scale (2xs–2xl), dynamic color schemes, and icon placeholder.