Airline Loyalty Program
Sophisticated email design for airline loyalty programs featuring a navy and gold color scheme, elegant typography, and structured layout perfect for travel brands and premium services
Preview
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta name="x-apple-disable-message-reformatting" />
<style>
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
</style>
</head>
<body style="background-color:#f8f9fc;margin:0;font-family:'DM Sans',sans-serif">
<table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:600px;margin:0 auto">
<!-- Header -->
<tr>
<td style="padding:40px 20px;text-align:center">
<h1 style="font-size:24px;font-weight:700;color:#14213d;margin:0;letter-spacing:2px">SKYWAYS</h1>
<p style="color:#6b7280;font-size:14px;margin:8px 0 0 0;letter-spacing:1px">ELITE PROGRAM</p>
</td>
</tr>
<!-- Hero Banner -->
<tr>
<td style="padding:0 20px">
<img src="https://images.unsplash.com/photo-1436491865332-7a61a109cc05" alt="Aerial View" style="width:100%;height:300px;object-fit:cover" />
</td>
</tr>
<!-- Welcome Message -->
<tr>
<td style="padding:40px 20px">
<table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background:#ffffff;padding:40px">
<tr>
<td style="text-align:center">
<h2 style="font-size:32px;font-weight:700;color:#14213d;margin:0 0 20px 0">Welcome to Elite Status</h2>
<p style="font-size:16px;line-height:1.6;color:#6b7280;margin:0;max-width:450px;margin:0 auto">Experience travel at its finest with exclusive benefits designed for our most valued members.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Benefits Grid -->
<tr>
<td style="padding:0 20px">
<table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation">
<tr>
<td style="width:50%;padding:10px">
<div style="background:#ffffff;padding:30px">
<h3 style="font-size:18px;font-weight:700;color:#14213d;margin:0">Priority Check-in</h3>
<p style="font-size:14px;color:#6b7280;margin:10px 0 0 0;line-height:1.5">Dedicated counters at all airports</p>
</div>
</td>
<td style="width:50%;padding:10px">
<div style="background:#ffffff;padding:30px">
<h3 style="font-size:18px;font-weight:700;color:#14213d;margin:0">Lounge Access</h3>
<p style="font-size:14px;color:#6b7280;margin:10px 0 0 0;line-height:1.5">Global network of premium lounges</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- Status Progress -->
<tr>
<td style="padding:40px 20px">
<table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background:#14213d">
<tr>
<td style="padding:40px;text-align:center">
<p style="font-size:14px;color:#fca311;margin:0 0 10px 0;letter-spacing:1px;text-transform:uppercase">Your Status</p>
<h2 style="font-size:36px;font-weight:700;color:#ffffff;margin:0 0 20px 0">GOLD ELITE</h2>
<table width="100%" max-width="400px" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin:0 auto">
<tr>
<td style="padding:15px 0;border-top:1px solid rgba(255,255,255,0.1);border-bottom:1px solid rgba(255,255,255,0.1)">
<table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation">
<tr>
<td style="text-align:left">
<p style="font-size:14px;color:#ffffff;margin:0">Miles Earned</p>
</td>
<td style="text-align:right">
<p style="font-size:14px;color:#ffffff;margin:0">75,000 / 100,000</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Exclusive Offer -->
<tr>
<td style="padding:0 20px">
<table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation">
<tr>
<td style="width:60%">
<img src="https://images.unsplash.com/photo-1540962351504-03099e0a754b" alt="First Class" style="width:100%;height:300px;object-fit:cover" />
</td>
<td style="width:40%;background:#ffffff;padding:30px">
<h3 style="font-size:24px;font-weight:700;color:#14213d;margin:0 0 15px 0">Double Miles Offer</h3>
<p style="font-size:14px;line-height:1.6;color:#6b7280;margin:0 0 20px 0">Book any first class flight before December 31st and earn double miles.</p>
<a href="#" style="display:inline-block;padding:12px 24px;background:#fca311;color:#ffffff;text-decoration:none;font-weight:500;font-size:14px">Book Now</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- App Download -->
<tr>
<td style="padding:40px 20px">
<table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background:#ffffff">
<tr>
<td style="padding:40px;text-align:center">
<h3 style="font-size:24px;font-weight:700;color:#14213d;margin:0 0 15px 0">Track Your Miles on the Go</h3>
<p style="font-size:14px;line-height:1.6;color:#6b7280;margin:0 0 20px 0">Download our mobile app to manage your account anywhere.</p>
<table width="100%" max-width="280px" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin:0 auto">
<tr>
<td style="padding:0 5px">
<a href="#" style="display:inline-block;padding:12px 24px;background:#14213d;color:#ffffff;text-decoration:none;font-weight:500;font-size:14px">App Store</a>
</td>
<td style="padding:0 5px">
<a href="#" style="display:inline-block;padding:12px 24px;background:#14213d;color:#ffffff;text-decoration:none;font-weight:500;font-size:14px">Google Play</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding:40px 20px;text-align:center;background:#14213d">
<p style="font-size:14px;color:#ffffff;margin:0 0 20px 0">Connect with Skyways</p>
<table width="100%" max-width="200px" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin:0 auto">
<tr>
<td style="padding:0 10px">
<a href="#" style="font-size:14px;color:#fca311;text-decoration:none">Instagram</a>
</td>
<td style="padding:0 10px">
<a href="#" style="font-size:14px;color:#fca311;text-decoration:none">Twitter</a>
</td>
<td style="padding:0 10px">
<a href="#" style="font-size:14px;color:#fca311;text-decoration:none">Facebook</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>