<Card title="Invoice #INV-2024-0147" subtitle="Sent to Acme Corporation · January 15, 2024">
<Columns>
<Stat label="Amount due" value="$4,750.00" change="USD" tone="info" icon="currency-usd" />
<Stat label="Due date" value="February 14, 2024" change="Net 30" tone="neutral" icon="calendar" />
<Stat label="Status" value="Unpaid" change="Payment pending" tone="warning" icon="clock" />
</Columns>

<Details title="Line items" open="true">
| # | Description | Qty | Rate | Amount |
|---|---|---|---|---|
| 1 | Brand identity design | 1 | $2,500.00 | $2,500.00 |
| 2 | Website mockups (5 pages) | 5 | $350.00 | $1,750.00 |
| 3 | Revisions (2 rounds) | 2 | $250.00 | $500.00 |
| **Total** | | | | **$4,750.00** |
</Details>

<Callout tone="info" title="Payment terms">Net 30 · Late payments subject to 1.5% monthly fee</Callout>

<Button variant="primary" size="large" icon="credit-card">Pay $4,750.00 now</Button>
<Button variant="secondary" size="large" icon="download">Download PDF</Button>
</Card>

<Card title="Payment methods">
<Columns>
<Card subtitle="Instant · 2.9% + $0.30 fee">
**Stripe**  
Credit/Debit Card, Apple Pay, Google Pay
</Card>
<Card subtitle="1-2 business days · $0 fee">
**Bank Transfer (ACH)**  
Routing: 021000021 · Account: •••• 4456
</Card>
<Card subtitle="Instant · 3.49% + $0.49 fee">
**PayPal**  
payments@freelancer.dev
</Card>
</Columns>
</Card>

<Card title="Client details">
| Field | Value |
|---|---|
| **Client** | Acme Corporation |
| **Contact** | Jane Smith, Creative Director |
| **Email** | jane.smith@acme.com |
| **Billing address** | 100 Market St, San Francisco, CA 94102 |
| **Invoice date** | January 15, 2024 |
| **Payment terms** | Net 30 |
</Card>