Windcraft

billing pattern

Invoice detail

Single invoice view — line items, totals, download PDF.

When to use it

User clicks an invoice in their billing history.

  • All amounts visible without scrolling
  • PDF download in one click

Layout regions

  • header
  • main

States

default
Invoice loaded
loading
Fetching
error
Not found / not yours

Example

<Container variant="md"><Card><CardHeader><CardTitle>Invoice {number}</CardTitle><Button asChild><a href={pdfUrl}>Download PDF</a></Button></CardHeader><CardContent><Table>...</Table></CardContent></Card></Container>

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

Related

Pricing
Checkout (single page)
Checkout (multi-step)

Build the Invoice detail pattern in your project.

Get started