dashboard pattern

Settings — billing

Plan + payment method + invoice history.

When to use it

User reviews subscription, changes plan, downloads invoices.

  • Subscription state at a glance
  • One-click portal access
  • Invoices downloadable

Layout regions

main
plan-card
Current plan + status badge
payment-card
Payment method
invoices-card
Invoice history

States

default
Active subscription
unauthorized
No subscription
partial
Past due / cancelled

Example

<Container><Stack size="6"><Card><CardHeader><CardTitle>Plan</CardTitle><Badge>Active</Badge></CardHeader>...</Card><Card><CardHeader><CardTitle>Invoices</CardTitle></CardHeader><CardContent><Table>...</Table></CardContent></Card></Stack></Container>

The full Settings — billing pattern specifies 2 exact microcopy strings, 1 motion spec, 4 composition rules — all gated behind the full recipe. Get the full recipe.

Related

Build the Settings — billing pattern in your project.