billing pattern
Pricing
Public pricing page. Plan cards + FAQ + CTA.
When to use it
Marketing site or in-product pricing comparison.
- Plan comparison clear at first glance
- Single CTA per card
- Money-back guarantee explicit
Layout regions
- header
- hero
- Headline + sub
- plans
- Plan cards
- faq
- Accordion of common questions
- footer
States
- default
- Plan cards (e.g. free + paid)
Example
<Container variant="lg"><Stack size="8"><h1 className="text-largeTitle">Pricing</h1><Grid cols={2}><PlanCard plan="free" price="$0" /><PlanCard plan="pro" price="$29" badge="Most popular" /></Grid><p>14-day money-back guarantee. Cancel any time.</p><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.