checkout billing order-summary ecommerce form checkout billing summary items subtotal shipping total checkout with order summary sidebar billing form with item list
Checkout With Summary
Fetch pattern JSON:
curl https://webspire.de/patterns/checkout/with-summary.json with-summary.html
<div class="ws-checkout grid grid-cols-1 gap-8 lg:grid-cols-5">
<form class="space-y-6 lg:col-span-3" aria-label="Billing information">
<h2 class="text-lg font-semibold text-[var(--ws-checkout-text)]">Billing Details</h2>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div>
<label for="ws-full-name" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">Full Name</label>
<input type="text" id="ws-full-name" name="full-name" autocomplete="name" class="mt-1 block w-full rounded-lg border border-[var(--ws-checkout-border)] bg-[var(--ws-checkout-bg)] px-3 py-2 text-sm text-[var(--ws-checkout-text)] shadow-sm placeholder:opacity-50 focus:border-[var(--ws-checkout-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-checkout-action-bg)]" />
</div>
<div>
<label for="ws-email" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">Email</label>
<input type="email" id="ws-email" name="email" autocomplete="email" class="mt-1 block w-full rounded-lg border border-[var(--ws-checkout-border)] bg-[var(--ws-checkout-bg)] px-3 py-2 text-sm text-[var(--ws-checkout-text)] shadow-sm placeholder:opacity-50 focus:border-[var(--ws-checkout-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-checkout-action-bg)]" />
</div>
</div>
<div>
<label for="ws-address" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">Street Address</label>
<input type="text" id="ws-address" name="address" autocomplete="street-address" class="mt-1 block w-full rounded-lg border border-[var(--ws-checkout-border)] bg-[var(--ws-checkout-bg)] px-3 py-2 text-sm text-[var(--ws-checkout-text)] shadow-sm placeholder:opacity-50 focus:border-[var(--ws-checkout-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-checkout-action-bg)]" />
</div>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
<div>
<label for="ws-city" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">City</label>
<input type="text" id="ws-city" name="city" autocomplete="address-level2" class="mt-1 block w-full rounded-lg border border-[var(--ws-checkout-border)] bg-[var(--ws-checkout-bg)] px-3 py-2 text-sm text-[var(--ws-checkout-text)] shadow-sm placeholder:opacity-50 focus:border-[var(--ws-checkout-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-checkout-action-bg)]" />
</div>
<div>
<label for="ws-zip" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">ZIP Code</label>
<input type="text" id="ws-zip" name="zip" autocomplete="postal-code" class="mt-1 block w-full rounded-lg border border-[var(--ws-checkout-border)] bg-[var(--ws-checkout-bg)] px-3 py-2 text-sm text-[var(--ws-checkout-text)] shadow-sm placeholder:opacity-50 focus:border-[var(--ws-checkout-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-checkout-action-bg)]" />
</div>
<div>
<label for="ws-country" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">Country</label>
<div class="relative">
<select id="ws-country" name="country" autocomplete="country" class="mt-1 block w-full appearance-none rounded-lg border border-[var(--ws-checkout-border)] bg-[var(--ws-checkout-bg)] px-3 pr-10 py-2 text-sm text-[var(--ws-checkout-text)] shadow-sm focus:border-[var(--ws-checkout-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-checkout-action-bg)]">
<option>United States</option>
<option>Germany</option>
<option>United Kingdom</option>
<option>France</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<svg class="h-4 w-4 text-[var(--ws-checkout-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/></svg>
</div>
</div>
</div>
</div>
</form>
<aside class="rounded-xl border border-[var(--ws-checkout-border)] bg-[var(--ws-checkout-card-bg)] p-6 lg:col-span-2" aria-label="Order summary">
<h2 class="text-lg font-semibold text-[var(--ws-checkout-text)]">Order Summary</h2>
<ul class="mt-4 divide-y divide-[var(--ws-checkout-border)]">
<li class="flex items-center justify-between py-3">
<div class="flex items-center gap-3">
<div class="h-10 w-10 rounded-lg bg-gradient-to-br from-indigo-200 to-indigo-300"></div>
<div>
<p class="text-sm font-medium text-[var(--ws-checkout-text)]">Wireless Headphones</p>
<p class="text-xs text-[var(--ws-checkout-text-soft)]">Qty: 1</p>
</div>
</div>
<span class="text-sm font-medium text-[var(--ws-checkout-text)]">$149.99</span>
</li>
<li class="flex items-center justify-between py-3">
<div class="flex items-center gap-3">
<div class="h-10 w-10 rounded-lg bg-gradient-to-br from-emerald-200 to-emerald-300"></div>
<div>
<p class="text-sm font-medium text-[var(--ws-checkout-text)]">USB-C Hub</p>
<p class="text-xs text-[var(--ws-checkout-text-soft)]">Qty: 1</p>
</div>
</div>
<span class="text-sm font-medium text-[var(--ws-checkout-text)]">$39.99</span>
</li>
</ul>
<dl class="mt-4 space-y-2 border-t border-[var(--ws-checkout-border)] pt-4">
<div class="flex justify-between">
<dt class="text-sm text-[var(--ws-checkout-text-soft)]">Subtotal</dt>
<dd class="text-sm font-medium text-[var(--ws-checkout-text)]">$189.98</dd>
</div>
<div class="flex justify-between">
<dt class="text-sm text-[var(--ws-checkout-text-soft)]">Shipping</dt>
<dd class="text-sm font-medium text-[var(--ws-checkout-text)]">$9.99</dd>
</div>
<div class="flex justify-between border-t border-[var(--ws-checkout-border)] pt-2">
<dt class="text-base font-semibold text-[var(--ws-checkout-text)]">Total</dt>
<dd class="text-base font-semibold text-[var(--ws-checkout-text)]">$199.97</dd>
</div>
</dl>
<button type="submit" class="mt-6 w-full rounded-lg bg-[var(--ws-checkout-action-bg)] px-4 py-3 text-sm font-medium text-[var(--ws-checkout-action-text)] transition hover:opacity-90">Place Order</button>
</aside>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
checkoutbillingorder-summaryecommerceform
Slots
| Name | Required | Description |
|---|---|---|
| billing-form | Yes | Billing information form with name, email, address, city, zip, country fields. |
| order-summary | Yes | Order summary card with item thumbnails, quantities, subtotal, shipping, and total. |
| submit | Yes | Place order button. |
Two-column checkout layout with a billing form (name, email, address) on the left and a detailed order summary on the right. Summary includes item thumbnails, quantities, subtotal, shipping, total, and a Place Order button.