Hey Maya — your cupcakes are in the oven 🧁 Here's your receipt.
 ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Colophon

How this email was built.

Hand-coded responsive HTML email. This fictional receipt for Sugar & Sprinkle — a sample bakery brand — was built as a portfolio project. All customer details, order data, pricing, business information, and links are sample content used for demonstration.

Table-based structure, inline + embedded CSS, MSO/VML fallbacks for Outlook, accessible alt text, mobile-first stacking, and Liquid-style dynamic order data with item loops and conditional discount/delivery logic — no framework, no preprocessor, no build step.

Engineering

  • HTML5 doctype, lang="en"
  • Table-based layout
  • Inline + embedded CSS
  • MSO conditional comments
  • VML <v:roundrect> CTA fallback
  • 600px max-width container
  • Liquid templating ({% for %}, {% if %}, {{ var }})
  • No JavaScript

Accessibility & resilience

  • Alt text on every image
  • role="presentation" on layout tables
  • Web fonts with system fallbacks
  • MSO font-family override for Outlook
  • Decorative confetti hidden from Outlook
  • Mobile stacking via @media queries
  • View-online link in utility strip

Breakpoints

  • 320px — small mobile
  • 375px — iPhone standard
  • 480px — small mobile (@media)
  • 600px — email canonical (@media)
  • 700px+ — desktop preview

Targeted clients

  • Gmail (web · iOS · Android)
  • Apple Mail (macOS · iOS)
  • Outlook 365 (web)
  • Outlook desktop / Word engine
  • Yahoo Mail

Liquid templating

{% for item in order.items %}
  <tr class="item {% if forloop.last %}last{% endif %}">
    <td>{{ item.name }} — Qty {{ item.quantity }}</td>
    <td>${{ item.price }}</td>
  </tr>
{% endfor %}
View full template source on GitHub
Desktop render of the Sugar & Sprinkle receipt — full layout from utility strip and brand block through the items list, totals, pickup card, support callout, and footer

Desktop — full capture scroll within the frame to see the full render

Mobile render of the Sugar & Sprinkle receipt — single-column stacked layout on a phone-width viewport

Mobile — full capture scroll within the frame to see the full render

Sugar & Sprinkle is a fictional brand created as an HTML email development project. No order, customer, transaction, product, pickup window, or business detail referenced in this email is real.

Cupcake imagery generated with Grok Imagine.