Skip to main content

Invoice record

Pagebeta@macaw-ds/blocks · since 0.1.0

An overdue invoice: status, reminder and download actions, line items with totals and a summary of what is owed.

The record template filled with invoice INV-0041 for Acme Corporation: an Overdue Badge, Void, Download PDF and Send reminder actions, section tabs, line items with quantities and end-aligned totals, and a summary of amount due, due date, customer and terms.

Fills template

Record template

When to use

  • Starting point for an invoice, bill or payment detail page.

When not to use

  • As a component: copy it and replace the data with your queries.

Rules

Hard rules for this composition. Keep them when you adapt the copy in your repo.

  1. Send reminder is the only primary Button; Void is ghost so it does not compete.
  2. Each tab links to its own URL.
  3. Totals are a definition list with numerals end-aligned.