Invoice receipt card with itemized total

Static invoice card with a to/from/memo block, itemized lines, and a total due, matches the shape of a Stripe-hosted invoice page. Drop into a billing or account-history section, keep the meta rows to three or four max before it feels cluttered.

pattern · stripe.com receipt cardvanilla

Get a site with blocks like this

Live preview

open in new tab ↗

<div class="sw-invoice-card">
  <div class="sw-invoice-head">
    <div>
      <p class="sw-invoice-label">Invoice</p>
      <p class="sw-invoice-amount">$89.00</p>
      <p class="sw-invoice-due">Due 8 June</p>
    </div>
    <span class="sw-invoice-pdf">Invoice PDF</span>
  </div>
  <div class="sw-invoice-meta">
    <div><span>To</span><strong>Jane Diaz</strong></div>
    <div><span>From</span><strong>Northwind</strong></div>
    <div><span>Memo</span><strong>Professional plan</strong></div>
  </div>
  <div class="sw-invoice-items">
    <div class="sw-invoice-item"><span>Professional plan &times; 1</span><span>$81.00</span></div>
    <div class="sw-invoice-item"><span>Tax (10%)</span><span>$8.00</span></div>
  </div>
  <div class="sw-invoice-total">
    <span>Total due</span>
    <strong>$89.00</strong>
  </div>
  <button class="sw-invoice-pay">Pay invoice</button>
</div>

Block id: stripe-invoice-receipt-cardvanilla · swap-content

More receipt blocks

Prompt receipt (Nav)

type-in-motion

Want the whole site, not just the block?

We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.

Get my free 15-min audit Book a Discovery Call