Interactive hero
Let visitors self-select their journey from the first scroll.
Hero Card Selector compositions use Card (with selected state), Grid, and Button for intent-driven landing page heroes.
5
intent cards
3
interaction states
5
content swaps
Default
Intent grid
Five cards: Travel Manager, Finance Lead, Executive, Road Warrior, Admin.
Selection states
Hover lift, selected ring, and content panel swap on selection.
- Optimized for
- Multi-persona products, B2B landing pages, and solution-based marketing.
- Requires
- Card component with selected state enhancement.