When to use it
Marketing site or in-product pricing comparison.
- Plan comparison clear at first glance
- Single CTA per card
- Yearly savings explicit
Layout regions
- header
- hero
- plans
- faq
- footer
States
- default
- partial
Example
<Container variant="lg"><Stack size="8"><h1 className="text-largeTitle">Pricing</h1><PlanToggle /><Grid cols={2}><PlanCard plan="monthly" /><PlanCard plan="yearly" badge="Save 17%" /></Grid><FAQ /></Stack></Container>The full Pricing pattern specifies 3 exact microcopy strings, 1 motion spec, 4 composition rules — all gated behind the full recipe. Get the full recipe.