UI Components Easy
Team Invite Email
Team invitation email with sender avatar, workspace name, role badge, and accept/decline CTA buttons. Table-based HTML.
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>You're invited to join Acme Workspace</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;text-align:center;">
<span style="font-size:22px;font-weight:800;color:#ffffff;">Acme</span>
</td>
</tr>
<!-- Hero -->
<tr>
<td style="padding:40px 40px 28px;text-align:center;">
<!-- Sender avatar -->
<div style="display:inline-block;width:64px;height:64px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:50%;text-align:center;line-height:64px;font-size:26px;color:#ffffff;font-weight:800;margin-bottom:20px;">A</div>
<h1 style="margin:0 0 10px;font-size:22px;font-weight:800;color:#111827;">You've been invited!</h1>
<p style="margin:0;font-size:15px;color:#6b7280;line-height:1.6;max-width:400px;margin:0 auto;">
<strong style="color:#111827;">Alex Chen</strong> has invited you to join the <strong style="color:#111827;">Acme Workspace</strong> on Acme.
</p>
</td>
</tr>
<!-- Role card -->
<tr>
<td style="padding:0 40px 28px;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;">
<tr>
<td style="padding:20px 24px;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<p style="margin:0 0 2px;font-size:11px;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:0.06em;">Workspace</p>
<p style="margin:0;font-size:15px;font-weight:700;color:#111827;">Acme Workspace</p>
</td>
<td style="text-align:right;">
<span style="display:inline-block;background:#eef2ff;color:#6366f1;font-size:12px;font-weight:700;padding:4px 12px;border-radius:20px;">Member</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:0 24px 20px;">
<hr style="border:none;border-top:1px solid #e5e7eb;margin:0 0 16px;" />
<table role="presentation" cellpadding="0" cellspacing="0">
<tr>
<td style="padding-right:32px;">
<p style="margin:0 0 2px;font-size:11px;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:0.06em;">Invited by</p>
<p style="margin:0;font-size:14px;color:#374151;">Alex Chen</p>
</td>
<td>
<p style="margin:0 0 2px;font-size:11px;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:0.06em;">Members</p>
<p style="margin:0;font-size:14px;color:#374151;">12 people</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- CTAs -->
<tr>
<td style="padding:0 40px 32px;text-align:center;">
<a href="#" style="display:inline-block;background:#6366f1;color:#ffffff;text-decoration:none;font-size:15px;font-weight:700;padding:14px 36px;border-radius:8px;margin-bottom:12px;">Accept Invitation</a>
<br />
<a href="#" style="font-size:13px;color:#9ca3af;text-decoration:none;">No thanks, decline</a>
</td>
</tr>
<!-- Expiry notice -->
<tr>
<td style="padding:0 40px 0;">
<hr style="border:none;border-top:1px solid #e5e7eb;margin:0;" />
</td>
</tr>
<tr>
<td style="padding:16px 40px;text-align:center;">
<p style="margin:0;font-size:13px;color:#9ca3af;">This invitation expires in <strong style="color:#374151;">7 days</strong>. If you weren't expecting this, you can ignore it.</p>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding:16px 40px 24px;text-align:center;border-top:1px solid #e5e7eb;">
<p style="margin:0;font-size:12px;color:#9ca3af;">© 2026 Acme, Inc. · <a href="#" style="color:#6366f1;text-decoration:none;">Privacy</a> · <a href="#" style="color:#6366f1;text-decoration:none;">Unsubscribe</a></p>
</td>
</tr>
</table>
<!-- EMAIL END -->
</div>
</body>
</html>Team workspace invitation email with sender’s avatar and name, workspace branding, role badge, accept invitation CTA, and an optional decline link. Email-safe table layout.