CatchCase

Design a responsive HTML email newsletter

Describe the issue and your brand. Get a responsive HTML email with header, sections, button and footer. Preview it on desktop and phone, then download.

How to use it

  1. Say what this issue is about The main message, one offer, and what you want readers to do.
  2. Check both views Use the phone toggle in the preview to see the narrow layout.
  3. Edit in place Select the element you want changed — a headline, a button — and describe it. Download when ready.

The prompt

You are an email designer. Create a responsive HTML newsletter.

Brand: [BRAND_NAME]

Topic of this issue: [ISSUE_TOPIC]

Main offer or call to action: [MAIN_OFFER]

Audience and tone: [AUDIENCE_TONE]

Requirements: one complete HTML file with inline-friendly CSS, a 600 px single column that works on phones, a header, three content sections, one clear button, and a footer with an unsubscribe link; short paragraphs and scannable headings; web-safe fonts only; no external images (use colour blocks and text).

Reply with the full HTML in one code block, then suggest two subject lines and a preheader text. When I ask for changes, return the whole file.

Example result

A 600 px single-column issue with a green header, a recipe card and one orange button, built from web-safe fonts so it renders the same in most mail apps.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Pantry Letter — October</title>
<style>
  body { margin:0; background:#eef1ea; font-family: Arial, Helvetica, sans-serif; color:#222; }
  .wrap { max-width:600px; margin:0 auto; background:#ffffff; }
  .top { background:#2f4a36; color:#fff; padding:28px 32px; }
  .top h1 { margin:0; font-size:26px; }
  .top p { margin:6px 0 0; opacity:.8; font-size:14px; }
  .section { padding:28px 32px; border-bottom:1px solid #e6e9e1; }
  h2 { margin:0 0 8px; font-size:20px; color:#2f4a36; }
  p { line-height:1.6; margin:0 0 12px; font-size:16px; }
  .btn { display:inline-block; background:#e07a2f; color:#fff !important; text-decoration:none; padding:12px 22px; border-radius:6px; font-weight:bold; }
  .recipe { background:#f7f4ec; border-radius:10px; padding:18px 20px; }
  .recipe b { color:#2f4a36; }
  .foot { padding:22px 32px; font-size:12px; color:#777; text-align:center; }
  @media (max-width:480px){ .section,.top{padding:22px 20px} }
</style>
</head>
<body>
<div class="wrap">
  <div class="top"><h1>The Pantry Letter</h1><p>October · 4 minute read</p></div>
  <div class="section">
    <h2>Soup season starts now</h2>
    <p>Hi Dana — the first cold week is the best excuse to cook something slow. This month we're sharing our favourite one-pot lentil soup and three pantry staples worth stocking up on.</p>
    <a class="btn" href="#">Get the recipe</a>
  </div>
  <div class="section">
    <h2>This month's recipe</h2>
    <div class="recipe"><p><b>Smoky red lentil soup</b> · 35 minutes · serves 4</p><p>Red lentils, smoked paprika, a can of tomatoes and a squeeze of lemon. Ready before the bread is toasted.</p></div>
  </div>
  <div class="section">
    <h2>Three things to stock up on</h2>
    <p>1. <b>Red lentils</b> — cook in 15 minutes, no soaking.<br>2. <b>Smoked paprika</b> — turns plain food into dinner.<br>3. <b>Good olive oil</b> — finish every bowl with a spoonful.</p>
    <p><a class="btn" href="#">Shop the pantry — 10% off with SOUP10</a></p>
  </div>
  <div class="foot">You're receiving this because you signed up at pantry.example.<br><a href="#">Unsubscribe</a> · <a href="#">View in browser</a></div>
</div>
</body>
</html>

Subject lines: "Soup season starts now" · "One pot, 35 minutes, and 10% off" Preheader: The cosy recipe we cook every October.

Related cases