Email Templates Guide
Learn how to create responsive, beautiful email templates with Metigan. Templates make it easy to maintain consistent branding and design across all your emails.
Creating Templates
Templates support HTML, CSS, and variables. See the Templates API for details.
template-example.htmlHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.header {
background: hsl(var(--primary));
color: white;
padding: 30px;
text-align: center;
border-radius: 8px 8px 0 0;
}
.content {
background: #ffffff;
padding: 30px;
border: 1px solid #e5e7eb;
}
.button {
display: inline-block;
padding: 12px 24px;
background-color: #667eea;
color: white;
text-decoration: none;
border-radius: 6px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Welcome, {{firstName}}!</h1>
</div>
<div class="content">
<p>Hello {{firstName}} {{lastName}},</p>
<p>Thank you for signing up! Your email is {{email}}.</p>
<a href="{{activationLink}}" class="button">Activate Account</a>
</div>
</div>
</body>
</html>Responsive Design
Always test your templates on different devices and email clients. Use media queries and inline styles for maximum compatibility.