UI 组件 中等
Newsletter Email Template
Newsletter email with header, featured article card, secondary article list, and footer unsubscribe link. Table-based layout.
在 Lab 中打开
MCP
html css
目标: JS HTML
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The Acme Weekly</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 banner -->
<tr>
<td style="background:linear-gradient(135deg,#6366f1,#8b5cf6);padding:36px 40px;text-align:center;">
<p style="margin:0 0 4px;font-size:11px;font-weight:700;color:rgba(255,255,255,0.7);text-transform:uppercase;letter-spacing:0.1em;">Issue #24 · March 2026</p>
<h1 style="margin:0;font-size:28px;font-weight:900;color:#ffffff;">The Acme Weekly</h1>
<p style="margin:8px 0 0;font-size:14px;color:rgba(255,255,255,0.8);">Developer news, tips, and updates — every Thursday.</p>
</td>
</tr>
<!-- Featured article -->
<tr>
<td style="padding:32px 40px 0;">
<p style="margin:0 0 16px;font-size:11px;font-weight:700;color:#6366f1;text-transform:uppercase;letter-spacing:0.08em;">Featured</p>
<div style="background:#f3f4f6;border-radius:12px;height:180px;margin-bottom:20px;text-align:center;line-height:180px;font-size:14px;color:#9ca3af;">Article cover image</div>
<span style="display:inline-block;background:#eef2ff;color:#6366f1;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;margin-bottom:10px;">Tutorial</span>
<h2 style="margin:0 0 10px;font-size:20px;font-weight:800;color:#111827;line-height:1.3;">Building accessible modal dialogs from scratch</h2>
<p style="margin:0 0 16px;font-size:14px;color:#6b7280;line-height:1.7;">Everything you need to know about focus trapping, ARIA roles, and keyboard navigation in 2026. No libraries required.</p>
<a href="#" style="display:inline-block;background:#111827;color:#ffffff;text-decoration:none;font-size:14px;font-weight:700;padding:10px 24px;border-radius:6px;">Read article →</a>
</td>
</tr>
<!-- Divider -->
<tr>
<td style="padding:28px 40px 0;">
<hr style="border:none;border-top:1px solid #e5e7eb;margin:0;" />
</td>
</tr>
<!-- More articles -->
<tr>
<td style="padding:24px 40px 0;">
<p style="margin:0 0 16px;font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:0.08em;">More this week</p>
<!-- Article 2 -->
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom:20px;">
<tr>
<td style="vertical-align:top;">
<span style="display:inline-block;background:#fef9c3;color:#a16207;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;margin-bottom:8px;">Tips</span>
<h3 style="margin:0 0 6px;font-size:15px;font-weight:700;color:#111827;">5 CSS tricks that saved me hours this month</h3>
<p style="margin:0 0 8px;font-size:13px;color:#6b7280;line-height:1.6;">container queries, subgrid, and the :has() selector you've been ignoring.</p>
<a href="#" style="font-size:13px;color:#6366f1;text-decoration:none;font-weight:600;">Read →</a>
</td>
</tr>
</table>
<!-- Article 3 -->
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom:20px;">
<tr>
<td style="vertical-align:top;">
<span style="display:inline-block;background:#dcfce7;color:#166534;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;margin-bottom:8px;">Release</span>
<h3 style="margin:0 0 6px;font-size:15px;font-weight:700;color:#111827;">Astro 5.1 ships with faster builds and new image API</h3>
<p style="margin:0 0 8px;font-size:13px;color:#6b7280;line-height:1.6;">A 40% speed improvement and a unified image pipeline that finally makes sense.</p>
<a href="#" style="font-size:13px;color:#6366f1;text-decoration:none;font-weight:600;">Read →</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- Divider -->
<tr>
<td style="padding:0 40px;">
<hr style="border:none;border-top:1px solid #e5e7eb;margin:0;" />
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding:24px 40px;text-align:center;">
<table role="presentation" cellpadding="0" cellspacing="0" style="margin:0 auto 16px;">
<tr>
<td style="padding:0 8px;"><a href="#" style="font-size:13px;color:#6366f1;text-decoration:none;font-weight:600;">Twitter</a></td>
<td style="padding:0 8px;"><a href="#" style="font-size:13px;color:#6366f1;text-decoration:none;font-weight:600;">GitHub</a></td>
<td style="padding:0 8px;"><a href="#" style="font-size:13px;color:#6366f1;text-decoration:none;font-weight:600;">Website</a></td>
</tr>
</table>
<p style="margin:0;font-size:12px;color:#9ca3af;">You're receiving this because you subscribed to The Acme Weekly.</p>
<p style="margin:6px 0 0;font-size:12px;color:#9ca3af;"><a href="#" style="color:#6366f1;text-decoration:none;">Unsubscribe</a> · <a href="#" style="color:#6366f1;text-decoration:none;">Manage preferences</a></p>
</td>
</tr>
</table>
<!-- EMAIL END -->
</div>
</body>
</html>Newsletter email with a full-width header banner, featured article card with image placeholder, secondary article list, and a footer with unsubscribe and social links. Email-safe table layout.