Selector system
Global pattern driven by child and sibling selectors
A parent global style controls card shells, adjacent borders, hover states, icon motion, and reveal text.
Map the system
Start with the workflow, touchpoints, and decisions that shape the experience.
Build the pattern
The grid global style controls card shells, sibling borders, and hover behavior.
Refine the motion
Hover selectors update nested text, icon shell, shape motion, and reveal meta.
Selector pattern
Local styles with child and sibling selectors
Direct child selector
The parent stack styles each direct child card.
Adjacent sibling selector
Cards after the first get spacing from the adjacent sibling selector.
Hover from parent
The hover selector targets each direct child from the parent block.
Selector system
A local pattern driven by parent selectors
This pattern uses direct child, adjacent sibling, parent hover, child hover, and generated-class child targets without custom helper classes.
Map the system
Start with a clean view of the workflow, touchpoints, and decisions that shape the experience.
Step 01
Build the pattern
Use the parent block to control card shells, sibling borders, and hover states without repeated card styling.
Step 02
Refine the motion
Generated classes are targeted directly by parent hover selectors for local-only patterns.
Step 03