e-commerce order receipt print confirmation receipt order print invoice monospace summary printable order receipt receipt-style order summary
Order Summary Receipt
Fetch pattern JSON:
curl https://webspire.de/patterns/order-summary/receipt.json receipt.html
<section
class="ws-order-summary"
style="
--ws-order-summary-bg: oklch(0.98 0.005 75);
--ws-order-summary-text: oklch(0.2 0.02 75);
--ws-order-summary-text-soft: oklch(0.45 0.015 75);
--ws-order-summary-border: oklch(0.85 0.01 75);
--ws-order-summary-accent: oklch(0.55 0.15 150);
--ws-order-summary-action-bg: oklch(0.35 0.02 75);
--ws-order-summary-action-text: oklch(0.98 0.005 75);
"
>
<div class="mx-auto max-w-md px-6 py-16 lg:py-24" style="background:var(--ws-order-summary-bg);color:var(--ws-order-summary-text)">
<div class="rounded-xl p-8" style="border:1px solid var(--ws-order-summary-border);font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace">
<!-- Header -->
<div class="text-center">
<div class="mx-auto h-10 w-24 rounded" style="background:var(--ws-order-summary-border)" role="img" aria-label="Company logo"></div>
<p class="mt-4 text-xs uppercase tracking-[0.2em]" style="color:var(--ws-order-summary-text-soft)">Receipt</p>
</div>
<!-- Order Details -->
<div class="mt-6 space-y-1 text-xs" style="border-top:1px dashed var(--ws-order-summary-border);padding-top:1rem">
<div class="flex justify-between">
<span style="color:var(--ws-order-summary-text-soft)">Order</span>
<span style="color:var(--ws-order-summary-text)">#WS-20260321-4829</span>
</div>
<div class="flex justify-between">
<span style="color:var(--ws-order-summary-text-soft)">Date</span>
<span style="color:var(--ws-order-summary-text)">2026-03-21</span>
</div>
<div class="flex justify-between">
<span style="color:var(--ws-order-summary-text-soft)">Payment</span>
<span style="color:var(--ws-order-summary-text)">Visa **** 4242</span>
</div>
</div>
<!-- Items -->
<div class="mt-4 space-y-2 text-xs" style="border-top:1px dashed var(--ws-order-summary-border);padding-top:1rem">
<div class="flex justify-between">
<span style="color:var(--ws-order-summary-text)">1x Wireless Headphones</span>
<span style="color:var(--ws-order-summary-text)">$99.00</span>
</div>
<div class="flex justify-between">
<span style="color:var(--ws-order-summary-text)">1x Smart Watch Pro</span>
<span style="color:var(--ws-order-summary-text)">$249.00</span>
</div>
</div>
<!-- Totals -->
<div class="mt-4 space-y-1 text-xs" style="border-top:1px dashed var(--ws-order-summary-border);padding-top:1rem">
<div class="flex justify-between">
<span style="color:var(--ws-order-summary-text-soft)">Subtotal</span>
<span style="color:var(--ws-order-summary-text)">$348.00</span>
</div>
<div class="flex justify-between">
<span style="color:var(--ws-order-summary-text-soft)">Shipping</span>
<span style="color:var(--ws-order-summary-text)">$12.00</span>
</div>
<div class="flex justify-between">
<span style="color:var(--ws-order-summary-text-soft)">Tax</span>
<span style="color:var(--ws-order-summary-text)">$28.80</span>
</div>
<div class="flex justify-between pt-2 text-sm font-bold" style="border-top:1px dashed var(--ws-order-summary-border)">
<span style="color:var(--ws-order-summary-text)">Total</span>
<span style="color:var(--ws-order-summary-text)">$388.80</span>
</div>
</div>
<!-- Print -->
<div class="mt-6 text-center" style="border-top:1px dashed var(--ws-order-summary-border);padding-top:1.5rem">
<button type="button" class="rounded-lg px-5 py-2.5 text-xs font-semibold uppercase tracking-wider transition hover:opacity-90" style="background:var(--ws-order-summary-action-bg);color:var(--ws-order-summary-action-text)">Print Receipt</button>
<p class="mt-3 text-xs" style="color:var(--ws-order-summary-text-soft)">Thank you for your purchase!</p>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
e-commerceorderreceiptprintconfirmation
Slots
| Name | Required | Description |
|---|---|---|
| header | Yes | Company logo and receipt label. |
| orderDetails | Yes | Order number, date, payment info. |
| items | Yes | Itemized purchase list. |
| totals | Yes | Cost breakdown with total. |
| actions | Yes | Print button. |
Receipt variant with traditional receipt styling. Use for printable order confirmations or digital receipts.