<Card title="Invoice #INV-2024-0417" subtitle="Sent to Acme Corporation · April 15, 2024">
  <Columns>
    <div>
      <strong>From:</strong><br />
      Jane Developer<br />
      123 Main St, Suite 400<br />
      San Francisco, CA 94102<br />
      jane@janedev.com
    </div>
    <div>
      <strong>Bill to:</strong><br />
      Acme Corporation<br />
      456 Market St, Floor 12<br />
      New York, NY 10001<br />
      billing@acme.com
    </div>
  </Columns>
</Card>

<Card title="Amount due">
  <Stat label="Total" value="$4,750.00" change="USD" tone="success" icon="currency-dollar" />
  <Stat label="Due date" value="May 15, 2024" change="Net 30 terms" tone="info" icon="calendar" />
</Card>

<Card title="Line items">
  | Description | Qty | Rate | Amount |
  |---|---|---|---|
  | React dashboard development | 25 hrs | $150.00 | $3,750.00 |
  | API integration & testing | 5 hrs | $150.00 | $750.00 |
  | Code review & documentation | 2 hrs | $125.00 | $250.00 |
  | **Subtotal** | | | **$4,750.00** |
  | **Tax (0%)** | | | **$0.00** |
  | **Total** | | | **$4,750.00** |
</Card>

<Card title="Payment options">
  <Button variant="primary" size="large" icon="credit-card">Pay $4,750.00 now</Button>
  <Button variant="secondary" href="mailto:jane@janedev.com?subject=Invoice%20INV-2024-0417%20payment%20details">Request wire details</Button>
</Card>

<Details title="Payment terms & notes" open="false">
- Payment due within 30 days of invoice date (Net 30)
- Late payments subject to 1.5% monthly interest
- Accepted: Credit card (Stripe), ACH, Wire transfer
- Please reference invoice #INV-2024-0417 with all payments
</Details>