Patternbook

Call to action — Audience choice cards

Two equal action cards separate routes for readers with different needs. Use it when the next step depends on readiness or the kind of help required.

1440 × 900

Open in new tab

Pattern notes

When to use
Use for two distinct conversion routes. Choose centered actions for one route with a secondary destination. Variations include a self-service route or a request-for-help route.
Hierarchy
Readers choose an audience card before its action. Keep heading below 10 words, audience title below 7, route copy below 24 and each condition below 8.
Responsive
Below 768px the cards stack in reading order. At 640px card padding grows to 32px. Actions remain aligned to the bottom within each card.
Layout
The white section uses a 1152px max-w-6xl container, 24px px-6 sides and 64px py-16 vertical padding, increasing to 96px sm:py-24 at 640px. Two equal md:grid-cols-2 cards sit 48px below a centered introduction with a 24px gap. Cards have 24px padding, 32px from 640px, a title, paragraph, two check rows and a bottom-aligned action with 32px top separation.
States
The 44px filled action changes from neutral-900 to neutral-700 on hover; outlined actions fill neutral-50. All controls show a 2px neutral-900 keyboard outline offset by 2px.
Desktop wireframe
┌──────────────────────────────────────────────────────────────┐
│               Heading for choosing the next step             │
│ ┌─────────────────────────┐  ┌─────────────────────────┐     │
│ │ Audience ready to begin │  │ Audience needing help   │     │
│ │ Route explanation       │  │ Route explanation       │     │
│ │ + Condition             │  │ + Condition             │     │
│ │ + Condition             │  │ + Condition             │     │
│ │ [Start now]             │  │ [Talk to someone]       │     │
│ └─────────────────────────┘  └─────────────────────────┘     │
└──────────────────────────────────────────────────────────────┘

More in Call to action

View all Call to action patterns