<Card title="Invoice #INV-2024-018" subtitle="From Bright Pixel Studio — for your recent project">
  <Columns>
    <Stat label="Amount due" value="$2,450.00" note="USD" tone="warning" icon="currency-dollar" />
    <Stat label="Due date" value="May 15, 2025" note="in 12 days" tone="info" icon="calendar" />
  </Columns>

  <Callout tone="warning" title="Payment reminder">
    Please pay by the due date to avoid a late fee of 2% per month.
  </Callout>

  <Button variant="primary" size="large" icon="credit-card">Pay now</Button>
  <Button variant="secondary" size="large">Pay with bank transfer</Button>
</Card>

<Card title="Invoice summary">
  <Tabs>
    <Tab title="Details">
      <table>
        <tr><td><strong>Invoice number</strong></td><td>INV-2024-018</td></tr>
        <tr><td><strong>Issued</strong></td><td>April 30, 2025</td></tr>
        <tr><td><strong>Due date</strong></td><td>May 15, 2025</td></tr>
        <tr><td><strong>Currency</strong></td><td>USD</td></tr>
        <tr><td><strong>Status</strong></td><td><Badge tone="warning">Pending</Badge></td></tr>
      </table>
    </Tab>
    <Tab title="Items">
      <table>
        <tr><th>Description</th><th>Qty</th><th>Rate</th><th>Amount</th></tr>
        <tr><td>Logo design (3 concepts)</td><td>1</td><td>$1,200.00</td><td>$1,200.00</td></tr>
        <tr><td>Brand guideline PDF</td><td>1</td><td>$650.00</td><td>$650.00</td></tr>
        <tr><td>Social media kit (5 posts)</td><td>1</td><td>$600.00</td><td>$600.00</td></tr>
        <tr><td><strong>Subtotal</strong></td><td></td><td></td><td>$2,450.00</td></tr>
        <tr><td><strong>Total due</strong></td><td></td><td></td><td><strong>$2,450.00</strong></td></tr>
      </table>
    </Tab>
    <Tab title="Payment method">
      <p>We accept Visa, Mastercard, Amex, and PayPal. Bank transfers are also welcome — use reference <strong>INV-2024-018</strong>.</p>
    </Tab>
  </Tabs>
</Card>