Order Summary Base

Fetch pattern JSON: curl https://webspire.de/patterns/order-summary/base.json

base.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-2xl px-6 py-16 lg:py-24" style="background:var(--ws-order-summary-bg);color:var(--ws-order-summary-text)">
    <div class="rounded-2xl p-8 text-center sm:p-10" style="border:1px solid var(--ws-order-summary-border)">
      <!-- Checkmark -->
      <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full" style="background:var(--ws-order-summary-accent)">
        <svg class="h-8 w-8" style="color:var(--ws-order-summary-action-text)" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
      </div>

      <h1 class="mt-5 text-2xl font-bold tracking-tight sm:text-3xl" style="color:var(--ws-order-summary-text)">Order Confirmed!</h1>
      <p class="mt-2 text-sm" style="color:var(--ws-order-summary-text-soft)">Order #WS-20260321-4829</p>
      <p class="text-sm" style="color:var(--ws-order-summary-text-soft)">March 21, 2026</p>

      <!-- Items -->
      <div class="mt-8 space-y-4 text-left">
        <div class="flex items-center gap-4">
          <div class="h-16 w-16 shrink-0 rounded-lg" style="background:linear-gradient(135deg, oklch(0.7 0.1 250), oklch(0.6 0.15 300))" role="img" aria-label="Wireless Headphones"></div>
          <div class="flex-1">
            <p class="text-sm font-semibold" style="color:var(--ws-order-summary-text)">Wireless Headphones</p>
            <p class="text-xs" style="color:var(--ws-order-summary-text-soft)">Qty: 1</p>
          </div>
          <p class="text-sm font-semibold" style="color:var(--ws-order-summary-text)">$99.00</p>
        </div>
        <div class="flex items-center gap-4">
          <div class="h-16 w-16 shrink-0 rounded-lg" style="background:linear-gradient(135deg, oklch(0.65 0.12 180), oklch(0.55 0.14 230))" role="img" aria-label="Smart Watch Pro"></div>
          <div class="flex-1">
            <p class="text-sm font-semibold" style="color:var(--ws-order-summary-text)">Smart Watch Pro</p>
            <p class="text-xs" style="color:var(--ws-order-summary-text-soft)">Qty: 1</p>
          </div>
          <p class="text-sm font-semibold" style="color:var(--ws-order-summary-text)">$249.00</p>
        </div>
      </div>

      <!-- Totals -->
      <div class="mt-6 space-y-2 text-left" style="border-top:1px solid var(--ws-order-summary-border);padding-top:1.5rem">
        <div class="flex justify-between text-sm">
          <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 text-sm">
          <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 text-sm">
          <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-3 text-base font-bold" style="border-top:1px solid 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>

      <button type="button" class="mt-8 w-full rounded-xl px-6 py-3.5 text-base font-semibold transition hover:opacity-90 sm:w-auto" style="background:var(--ws-order-summary-action-bg);color:var(--ws-order-summary-action-text)">Track Order</button>
    </div>
  </div>
</section>

Details

Family

order-summary

Tier

base

Kind

section

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

e-commerceorderconfirmationsummarycheckout

Slots

Name	Required	Description
status	Yes	Checkmark icon and confirmation heading.
orderInfo	Yes	Order number and date.
items	Yes	Ordered items list with thumbnails.
totals	Yes	Cost breakdown and total.
actions	Yes	Track order button.

Base variant for the Order Summary family. Use this as the post-checkout confirmation page.