Group and peer variants

Styling based on another element

Sometimes a child needs to react to a parent's state. The group pattern lets a child use variants such as group-hover:. The peer pattern lets an element respond to the state of a sibling marked as a peer.

Useful for components

These variants are valuable for cards, menus, form labels, floating hints and interactive rows where JavaScript is not required for the visual state.