A group of avatar with avatar-group . They can be hovered/focused.

---

Add avatar-badge with optional colors.

---

---

Soft colors allow same style colors

• Use bg-soft modifier to use transparency on any bg-* (may work better with dark mode).
• Use bg-softy modifier to use transparency on any bg-* (but avoid transparency issue by using a white/black background).
• Position badges with avatar-badge-*
• Pad text properly in badges with avatar-badge-text

Using -subtle styles. You need to use text-* as well

Using bg-soft(y) modifier (and you get hover behaviour as a bonus :-) )

---

They should all have white icons and proper contrast. Primary and info should not look too much alike.

---