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 anybg-*
(may work better with dark mode). -
Use
bg-softy
modifier to use transparency on anybg-*
(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.