UI Components Medium
Order Confirmation Email
E-commerce order confirmation email with order number, product summary, shipping address, and delivery estimate. Table-based.
Open in Lab
MCP
html css
Targets: JS HTML
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Order Confirmed — #ORD-2026-5821</title>
<style>
body { margin: 0; padding: 0; background: #f4f5f7; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.preview-wrap { padding: 32px 16px; background: #f4f5f7; }
.email-wrap { max-width: 600px; margin: 0 auto; background: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
</style>
</head>
<body>
<div class="preview-wrap">
<!-- EMAIL START -->
<table class="email-wrap" role="presentation" cellpadding="0" cellspacing="0" width="100%">
<!-- Header -->
<tr>
<td style="background:#111827;padding:24px 40px;">
<span style="font-size:22px;font-weight:800;color:#ffffff;">Acme Shop</span>
</td>
</tr>
<!-- Confirmation hero -->
<tr>
<td style="padding:40px 40px 24px;text-align:center;">
<div style="display:inline-block;width:60px;height:60px;background:#dcfce7;border-radius:50%;text-align:center;line-height:60px;font-size:28px;margin-bottom:16px;">✓</div>
<h1 style="margin:0 0 8px;font-size:24px;font-weight:800;color:#111827;">Order confirmed!</h1>
<p style="margin:0;font-size:15px;color:#6b7280;">Thanks, Jane. We're getting your order ready.</p>
</td>
</tr>
<!-- Order number badge -->
<tr>
<td style="padding:0 40px 28px;text-align:center;">
<div style="display:inline-block;background:#f3f4f6;border-radius:8px;padding:12px 24px;">
<span style="font-size:11px;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:0.06em;display:block;margin-bottom:4px;">Order Number</span>
<span style="font-size:18px;font-weight:800;color:#111827;">#ORD-2026-5821</span>
</div>
</td>
</tr>
<!-- Divider -->
<tr>
<td style="padding:0 40px;">
<hr style="border:none;border-top:1px solid #e5e7eb;margin:0;" />
</td>
</tr>
<!-- Order items -->
<tr>
<td style="padding:24px 40px 0;">
<p style="margin:0 0 16px;font-size:13px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:0.05em;">Order Summary</p>
<!-- Item 1 -->
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom:16px;">
<tr>
<td style="width:60px;vertical-align:top;">
<div style="width:56px;height:56px;background:#e0e7ff;border-radius:8px;text-align:center;line-height:56px;font-size:24px;">👟</div>
</td>
<td style="padding-left:14px;vertical-align:top;">
<p style="margin:0 0 2px;font-size:14px;font-weight:700;color:#111827;">Air Runner Pro — White/Blue</p>
<p style="margin:0;font-size:13px;color:#6b7280;">Size: 10 · Qty: 1</p>
</td>
<td style="text-align:right;vertical-align:top;">
<p style="margin:0;font-size:14px;font-weight:700;color:#111827;">$129.00</p>
</td>
</tr>
</table>
<!-- Item 2 -->
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom:24px;">
<tr>
<td style="width:60px;vertical-align:top;">
<div style="width:56px;height:56px;background:#fce7f3;border-radius:8px;text-align:center;line-height:56px;font-size:24px;">🧢</div>
</td>
<td style="padding-left:14px;vertical-align:top;">
<p style="margin:0 0 2px;font-size:14px;font-weight:700;color:#111827;">Classic Cap — Black</p>
<p style="margin:0;font-size:13px;color:#6b7280;">One size · Qty: 2</p>
</td>
<td style="text-align:right;vertical-align:top;">
<p style="margin:0;font-size:14px;font-weight:700;color:#111827;">$48.00</p>
</td>
</tr>
</table>
<!-- Totals -->
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="border-top:1px solid #e5e7eb;padding-top:16px;">
<tr>
<td style="padding:4px 0;font-size:13px;color:#6b7280;">Subtotal</td>
<td style="padding:4px 0;font-size:13px;color:#374151;text-align:right;">$177.00</td>
</tr>
<tr>
<td style="padding:4px 0;font-size:13px;color:#6b7280;">Shipping</td>
<td style="padding:4px 0;font-size:13px;color:#15803d;text-align:right;font-weight:600;">Free</td>
</tr>
<tr>
<td style="padding:8px 0 0;font-size:16px;font-weight:800;color:#111827;">Total</td>
<td style="padding:8px 0 0;font-size:16px;font-weight:800;color:#111827;text-align:right;">$177.00</td>
</tr>
</table>
</td>
</tr>
<!-- Shipping address -->
<tr>
<td style="padding:24px 40px 0;">
<hr style="border:none;border-top:1px solid #e5e7eb;margin:0 0 24px;" />
<table role="presentation" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width:50%;vertical-align:top;">
<p style="margin:0 0 6px;font-size:11px;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:0.06em;">Ship To</p>
<p style="margin:0;font-size:14px;font-weight:700;color:#111827;">Jane Smith</p>
<p style="margin:0;font-size:14px;color:#6b7280;line-height:1.6;">123 Main Street<br />New York, NY 10001<br />United States</p>
</td>
<td style="width:50%;vertical-align:top;text-align:right;">
<p style="margin:0 0 6px;font-size:11px;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:0.06em;">Estimated Delivery</p>
<p style="margin:0;font-size:14px;font-weight:700;color:#111827;">March 10 – 12, 2026</p>
<p style="margin:4px 0 0;font-size:13px;color:#6b7280;">Standard Shipping (3–5 days)</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Track order CTA -->
<tr>
<td style="padding:28px 40px;text-align:center;">
<a href="#" style="display:inline-block;background:#111827;color:#ffffff;text-decoration:none;font-size:14px;font-weight:700;padding:12px 28px;border-radius:8px;">Track Your Order</a>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding:20px 40px;border-top:1px solid #e5e7eb;text-align:center;">
<p style="margin:0;font-size:12px;color:#9ca3af;">Questions? <a href="#" style="color:#6366f1;text-decoration:none;">Contact support</a> · © 2026 Acme Shop</p>
</td>
</tr>
</table>
<!-- EMAIL END -->
</div>
</body>
</html>E-commerce order confirmation email with order number badge, product line items with thumbnails, shipping address, delivery estimate, and a track order CTA. Table-based HTML.