Avatar
A photo with initials as the fallback, a status badge and overlapping groups.
Ada LovelaceALGrace HopperGHMargaret HamiltonMHAlan KayAK3 more people
Ada LovelaceALGrace HopperGHMargaret HamiltonMHAlan KayAK3 more people
Ada LovelaceALGrace HopperGHMargaret HamiltonMHAlan KayAK3 more people
Installation
npx yolkui add avatarSizes and shape
Five sizes, 24 · 32 · 40 · 48 · 64, and shape="square". name gives the initials and the accessible name.
sm · 24Ada LovelaceALAda LovelaceALYolk TeamYTYolk KitYK
default · 32Ada LovelaceALAda LovelaceALYolk TeamYTYolk KitYK
lg · 40Ada LovelaceALAda LovelaceALYolk TeamYTYolk KitYK
xl · 48Ada LovelaceALAda LovelaceALYolk TeamYTYolk KitYK
2xl · 64Ada LovelaceALAda LovelaceALYolk TeamYTYolk KitYK
Fallback
A photo that fails to load ends in initials, from the name or your own text.
Alan TuringATCN
Status
AvatarBadge's label is read with the name, "Ada Lovelace (Online)", so the colour is never the only signal.
Ada LovelaceAL(Online)Grace HopperGH(Away)Margaret HamiltonMH(Busy)Mary ShelleyMS(Offline)Alan KayAK(Verified)
Notification
position="top" puts the dot at the top corner, for unread activity.
Alan KayAK(3 unread)Alan KayAK(3 unread)Alan KayAK(3 unread)Alan KayAK(3 unread)Alan KayAK(3 unread)Yolk TeamYT(New activity)
A real photo
A notification at the top and presence at the bottom, on a photo.
Yolk ProfileYP(3 unread)Yolk ProfileYP(3 unread)Yolk ProfileYP(3 unread)Yolk ProfileYP(3 unread)Yolk ProfileYP(3 unread)
Yolk ProfileYP(Online)Yolk ProfileYP(Online)Yolk ProfileYP(Online)Yolk ProfileYP(Online)Yolk ProfileYP(Online)Yolk ProfileYP(3 unread)
In a list
When the name is printed beside it, hide the avatar from assistive technology (aria-hidden). On a card-coloured surface set --avatar-cutout.
- Owner
Ada Lovelace
ada@yolkui.com · online
- Editor
Grace Hopper
grace@yolkui.com · away
- Viewer
Margaret Hamilton
margaret@yolkui.com
