<Card title="Invoice #INV-2024-0187" subtitle="Acme Design Studio • Sent 14 Jan 2024">
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
    <Stat label="Amount due" value="$4,750.00" change="USD" tone="info" icon="currency-dollar" />
    <Badge tone="warning">Due in 3 days</Badge>
  </div>

  <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 16px;">
    <div>
      <strong>Due date</strong>
      <div style="color: var(--muted); font-size: 14px;">17 January 2024</div>
    </div>
    <div style="text-align: right;">
      <strong>Invoice date</strong>
      <div style="color: var(--muted); font-size: 14px;">14 January 2024</div>
    </div>
  </div>

  <Details title="Line items" open="true">
    <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
      <thead>
        <tr style="border-bottom: 1px solid var(--border); text-align: left;">
          <th style="padding: 8px 0; color: var(--muted); font-weight: 500;">Description</th>
          <th style="padding: 8px 0; color: var(--muted); font-weight: 500; text-align: right;">Qty</th>
          <th style="padding: 8px 0; color: var(--muted); font-weight: 500; text-align: right;">Rate</th>
          <th style="padding: 8px 0; color: var(--muted); font-weight: 500; text-align: right;">Amount</th>
        </tr>
      </thead>
      <tbody>
        <tr style="border-bottom: 1px solid var(--border);">
          <td style="padding: 12px 0;">Brand identity design</td>
          <td style="padding: 12px 0; text-align: right;">1</td>
          <td style="padding: 12px 0; text-align: right;">$2,500.00</td>
          <td style="padding: 12px 0; text-align: right;">$2,500.00</td>
        </tr>
        <tr style="border-bottom: 1px solid var(--border);">
          <td style="padding: 12px 0;">Website redesign (3 pages)</td>
          <td style="padding: 12px 0; text-align: right;">1</td>
          <td style="padding: 12px 0; text-align: right;">$1,800.00</td>
          <td style="padding: 12px 0; text-align: right;">$1,800.00</td>
        </tr>
        <tr>
          <td style="padding: 12px 0;">Social media template pack</td>
          <td style="padding: 12px 0; text-align: right;">1</td>
          <td style="padding: 12px 0; text-align: right;">$450.00</td>
          <td style="padding: 12px 0; text-align: right;">$450.00</td>
        </tr>
      </tbody>
    </table>
    <div style="display: flex; justify-content: flex-end; margin-top: 12px; font-size: 14px;">
      <div style="text-align: right;">
        <div style="color: var(--muted);">Subtotal</div>
        <div style="color: var(--muted);">Tax (0%)</div>
        <div style="font-weight: 600; font-size: 16px;">Total: $4,750.00</div>
      </div>
    </div>
  </Details>

  <Button size="large" icon="credit-card" style="width: 100%; margin-top: 8px;">Pay $4,750.00 now</Button>
  <Button variant="secondary" size="large" style="width: 100%; margin-top: 8px;">Download PDF</Button>
</Card>

<Callout tone="info" title="Payment details">
  Payments are processed securely via Stripe. You'll receive a receipt immediately after payment. Net 30 terms apply from invoice date.
</Callout>