Skip to content

Instantly share code, notes, and snippets.

@TimoWestland

TimoWestland/template-example.html

Created June 26, 2018 08:32
Show Gist options
  • Save TimoWestland/4e403e6a480ab798614e8107afc8c863 to your computer and use it in GitHub Desktop.
Save TimoWestland/4e403e6a480ab798614e8107afc8c863 to your computer and use it in GitHub Desktop.
Download ZIP
Exmaple of sendgrid email template
Raw
template-example.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html data-editor-version="2" class="sg-campaigns" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /><!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge" /><!--<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
body {width: 700px;margin: 0 auto;}
table {border-collapse: collapse;}
table, td {mso-table-lspace: 0pt;mso-table-rspace: 0pt;}
img {-ms-interpolation-mode: bicubic;}
</style>
<![endif]-->
<style type="text/css">
body, p, div {
font-family: arial,helvetica,sans-serif;
font-size: 14px;
}
body {
color: #000000;
}
body a {
color: #1188E6;
text-decoration: none;
}
p { margin: 0; padding: 0; }
table.wrapper {
width:100% !important;
table-layout: fixed;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
img.max-width {
max-width: 100% !important;
}
.column.of-2 {
width: 50%;
}
.column.of-3 {
width: 33.333%;
}
.column.of-4 {
width: 25%;
}
@media screen and (max-width:480px) {
.preheader .rightColumnContent,
.footer .rightColumnContent {
text-align: left !important;
}
.preheader .rightColumnContent div,
.preheader .rightColumnContent span,
.footer .rightColumnContent div,
.footer .rightColumnContent span {
text-align: left !important;
}
.preheader .rightColumnContent,
.preheader .leftColumnContent {
font-size: 80% !important;
padding: 5px 0;
}
table.wrapper-mobile {
width: 100% !important;
table-layout: fixed;
}
img.max-width {
height: auto !important;
max-width: 480px !important;
}
a.bulletproof-button {
display: block !important;
width: auto !important;
font-size: 80%;
padding-left: 0 !important;
padding-right: 0 !important;
}
.columns {
width: 100% !important;
}
.column {
display: block !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
</style>
<!--user entered Head Start-->
<title>Multiopticas encomenda</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css">
<style type="text/css">
* {
font-family: Roboto, Arial, Sans-Serif;
}
</style>
<!--End Head user entered-->
</head>
<body>
<center class="wrapper" data-link-color="#1188E6" data-body-style="font-size: 14px; font-family: arial,helvetica,sans-serif; color: #000000; background-color: #ffffff;">
<div class="webkit">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="wrapper" bgcolor="#ffffff">
<tr>
<td valign="top" bgcolor="#ffffff" width="100%">
<table width="100%" role="content-container" class="outer" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<!--[if mso]>
<center>
<table><tr><td width="700">
<![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width: 100%; max-width:700px;" align="center">
<tr>
<td role="modules-container" style="padding: 0px 0px 0px 0px; color: #000000; text-align: left;" bgcolor="#ffffff" width="100%" align="left">
<table class="module preheader preheader-hide" role="module" data-type="preheader" border="0" cellpadding="0" cellspacing="0" width="100%"
style="display: none !important; mso-hide: all; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">
<tr>
<td role="module-content">
<p></p>
</td>
</tr>
</table>
<table class="wrapper" role="module" data-type="image" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
<tr>
<td style="font-size:6px;line-height:10px;padding:0px 10px 0px 0px;background-color:#FAFAFA;" valign="top" align="left">
<img class="max-width" border="0" style="display:block;color:#000000;text-decoration:none;font-family:Helvetica, arial, sans-serif;font-size:16px;max-width:50% !important;width:50%;height:auto !important;" src="https://marketing-image-production.s3.amazonaws.com/uploads/a85c80c7f4c8949ee9ba78036f76b7172c0087308d68a98a0266556a69ac819370689ea9571c049fa2dca50f4d9941f3bf071ee837a86fe8c9be62e27afcd9c2.png" alt="" width="350">
</td>
</tr>
</table>
<table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
<tr>
<td style="padding:18px 20px 18px 20px;line-height:22px;text-align:inherit;"
height="100%"
valign="top"
bgcolor="">
<div>
<style type="text/css">.sg-campaigns p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 26.0px 'Helvetica Neue'; color: #000000}
</style>
<h2 style="line-height: 1.25; margin:0;"><strong>Obrigada pela sua encomenda!</strong></h2>
</div>
</td>
</tr>
</table>
<table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
<tr>
<td style="padding:10px 20px 18px 20px;line-height:22px;text-align:inherit;"
height="100%"
valign="top"
bgcolor="">
<style type="text/css">.sg-campaigns p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 26.0px 'Helvetica Neue'; color: #000000}
</style>
<div class="p1">Olá {{customerName}},</div>
<div class="p1">&nbsp;</div>
<div>Obrigada por comprar na MultiOpticas! A sua encomenda número {{orderNumber}} está agora a ser preparada.&nbsp;</div>
<div><br>
Nota: Este recibo não serve de fatura. A mesma será entregue em conjunto com a sua entrega.</div>
</td>
</tr>
</table>
<table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
<tr>
<td style="padding:15px 20px 0px 20px;line-height:0px;text-align:inherit;"
height="100%"
valign="top"
bgcolor="">
<h2>Informação de Envio</h2>
</td>
</tr>
</table>
<table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
<tr>
<td style="padding:10px 20px 10px 20px;line-height:22px;text-align:inherit;"
height="100%"
valign="top"
bgcolor="">
<div><strong>Método de Entrega</strong></div>
<div>{{shippingMethod}}</div>
<div>&nbsp;</div>
<div><strong>Seu pedido será enviado também</strong></div>
<div>{{customerName}}</div>
<div>{{shippingStoreName}}</div>
<div>{{shippingStreetName}} {{shippingStreetNumber}}</div>
<div>{{shippingPostalCode}} {{shippingCity}}</div>
<div>{{shippingCountry}}</div>
</td>
</tr>
</table>
<table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
<tr>
<td style="padding:18px 20px 18px 20px;line-height:22px;text-align:inherit;"
height="100%"
valign="top"
bgcolor="">
<h2 style="margin-bottom: 0px;">Detalhes da sua Encomenda numeréo {{orderNumber}}</h2>
</td>
</tr>
</table>
<table class="module" role="module" data-type="code" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
<tr>
<td height="100%" valign="top">
{{#each products}}
<table style="padding: 10px 20px; border-bottom: 1px solid #ECECEC;">
<tbody>
<tr>
<td width="30%">
<img class="max-width" border="0" style="display:block;color:#000000;text-decoration:none;font-family:Helvetica, arial, sans-serif;font-size:16px;max-width:80% !important;width:80%;height:auto !important;" src="https://multiopticas.imgix.net{{this.productImageUrl}}?q=50&amp;w=500&amp;fm=jpeg" alt="{{this.productBrand}} {{this.productCode}}" width="280">
</td>
<td width="70%">
<table>
<tbody>
<tr>
<td><strong>{{this.productBrand}}</strong></td>
</tr>
<tr>
<td>{{this.productCode}}</td>
</tr>
<tr height="10px"></tr>
<tr>
<td>Qty: {{this.productQuantity}}</td>
</tr>
<tr>
<td>€ {{this.productPrice}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
{{/each}}
</td>
</tr>
</table><table class="module" role="module" data-type="code" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
<tr>
<td height="100%" valign="top">
<table width="100%" style="padding: 10px 20px 40px 20px;">
<tbody>
<tr>
<td width="30%" style="text-align:right;padding-right:30px;"><strong>Envio</strong></td><td width="70%">Grátis</td>
</tr>
<tr height="10px"></tr>
<tr>
<td width="30%" style="text-align:right;padding-right:30px;"><strong>Total</strong></td><td width="70%"><strong>€ {{totalPrice}}</strong></td>
</tr>
<tr height="20px"></tr>
<tr>
<td width="30%" style="text-align:right;padding-right:30px;"><strong>Método de Pagamento</strong></td><td width="70%">{{paymentMethod}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table class="module"
role="module"
data-type="divider"
border="0"
cellpadding="0"
cellspacing="0"
width="100%"
style="table-layout: fixed;">
<tr>
<td style="padding:0px 0px 0px 0px;"
role="module-content"
height="100%"
valign="top"
bgcolor="">
<table border="0"
cellpadding="0"
cellspacing="0"
align="center"
width="100%"
height="10px"
style="line-height:10px; font-size:10px;">
<tr>
<td
style="padding: 0px 0px 10px 0px;"
bgcolor="#ffffff"></td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0"
cellpadding="0"
cellspacing="0"
align="center"
width="100%"
role="module"
data-type="columns"
data-version="2"
style="padding:10px 20px 5px 20px;background-color:#002d72;box-sizing:border-box;"
bgcolor="#002d72">
<tr role='module-content'>
<td height="100%" valign="top">
<!--[if (gte mso 9)|(IE)]>
<center>
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-spacing:0;border-collapse:collapse;table-layout: fixed;" >
<tr>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<td width="330.000px" valign="top" style="padding: 0px 0px 0px 0px;border-collapse: collapse;" >
<![endif]-->
<table width="330.000"
style="width:330.000px;border-spacing:0;border-collapse:collapse;margin:0px 0px 0px 0px;"
cellpadding="0"
cellspacing="0"
align="left"
border="0"
bgcolor="#002d72"
class="column column-0 of-2
empty"
>
<tr>
<td style="padding:0px;margin:0px;border-spacing:0;">
<table class="wrapper" role="module" data-type="image" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
<tr>
<td style="font-size:6px;line-height:10px;padding:0px 0px 0px 0px;margin-top:30px;" valign="top" align="center">
<a href="https://multiopticas.pt"><img class="max-width" border="0" style="display:block;color:#000000;text-decoration:none;font-family:Helvetica, arial, sans-serif;font-size:16px;max-width:100% !important;width:100%;height:auto !important;" src="https://marketing-image-production.s3.amazonaws.com/uploads/7497f48c650e329294401f0f5a976f4c7c555bf20df3795001c5ce158d5e67dfadce9452dc7fa72a9b5087491a0466b520ce5663a223b2116edb8c2f6b76afa6.png" alt="Multiopticas logo" width="330"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<td width="330.000px" valign="top" style="padding: 0px 0px 0px 0px;border-collapse: collapse;" >
<![endif]-->
<table width="330.000"
style="width:330.000px;border-spacing:0;border-collapse:collapse;margin:0px 0px 0px 0px;"
cellpadding="0"
cellspacing="0"
align="left"
border="0"
bgcolor="#002d72"
class="column column-1 of-2
empty"
>
<tr>
<td style="padding:0px;margin:0px;border-spacing:0;">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<tr>
</table>
</center>
<![endif]-->
</td>
</tr>
</table>
<table border="0"
cellpadding="0"
cellspacing="0"
align="center"
width="100%"
role="module"
data-type="columns"
data-version="2"
style="padding:0px 20px 0px 20px;background-color:#002d72;box-sizing:border-box;"
bgcolor="#002d72">
<tr role='module-content'>
<td height="100%" valign="top">
<!--[if (gte mso 9)|(IE)]>
<center>
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-spacing:0;border-collapse:collapse;table-layout: fixed;" >
<tr>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<td width="330.000px" valign="top" style="padding: 0px 0px 0px 0px;border-collapse: collapse;" >
<![endif]-->
<table width="330.000"
style="width:330.000px;border-spacing:0;border-collapse:collapse;margin:0px 0px 0px 0px;"
cellpadding="0"
cellspacing="0"
align="left"
border="0"
bgcolor="#002d72"
class="column column-0 of-2
empty"
>
<tr>
<td style="padding:0px;margin:0px;border-spacing:0;">
<table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
<tr>
<td style="padding:0px 0px 0px 0px;line-height:22px;text-align:inherit;"
height="100%"
valign="top"
bgcolor="">
<h2><span style="color:#FFFFFF;">Podemos ajudá lo...</span></h2>
</td>
</tr>
</table>
<table class="module" role="module" data-type="code" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
<tr>
<td height="100%" valign="top">
<div><span style="color:#FFFFFF;line-height: 25px;">Numa das nossas mais de&nbsp;<strong><a href="https://multiopticas.pt/stores" style="color:white">+ 200 lojass</a></strong></span></div>
<div><span style="color:#FFFFFF;line-height: 25px;">Atraves do telefone:&nbsp;<strong><a href="tel:+351213234500" style="color:white">+351213234500</a></strong></span></div>
<div><span style="color:#FFFFFF;line-height: 25px;">E-mail:&nbsp;<strong><a href="mailto:online@multiopticas.pt" style="color:white">online@multiopticas.pt</a></strong></span></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<td width="330.000px" valign="top" style="padding: 0px 0px 0px 0px;border-collapse: collapse;" >
<![endif]-->
<table width="330.000"
style="width:330.000px;border-spacing:0;border-collapse:collapse;margin:0px 0px 0px 0px;"
cellpadding="0"
cellspacing="0"
align="left"
border="0"
bgcolor="#002d72"
class="column column-1 of-2
empty"
>
<tr>
<td style="padding:0px;margin:0px;border-spacing:0;">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<tr>
</table>
</center>
<![endif]-->
</td>
</tr>
</table>
<table class="module" role="module" data-type="code" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
<tr>
<td height="100%" valign="top">
<div style="width:100%">
<table width="100%" style="background-color: #002D72; padding: 30px 40px 30px 20px;">
<tbody><tr>
<td><h2 style="color:white;">Não perca as nossas novidades</h2></td>
</tr>
<tr width="100%">
<td>
<a style="width:40px;height:40px;display:inline-block;margin-right:15px;" href="https://www.facebook.com/MultiOpticasPortugal/"><img class="max-width" border="0" style="display:block;color:#000000;text-decoration:none;font-family:Helvetica, arial, sans-serif;font-size:16px;max-width:100% !important;width:100%;height:auto !important;" src="https://marketing-image-production.s3.amazonaws.com/uploads/9b280a922d7dc15be451ff9a5eeb2ff589dbfa4c7778123540329c47bae6e4f9bf5d849e37f787e99b0e10d5c206f897f2273ad5b9510050ef5b5ecca31181e8.png" alt="Facebook" width="212"></a>
<a style="width:40px;height:40px;display:inline-block;margin-right:15px;" href="https://www.youtube.com/channel/UCwk8aOdeicK7_lSDiZ1mQNw"><img class="max-width" border="0" style="display:block;color:#000000;text-decoration:none;font-family:Helvetica, arial, sans-serif;font-size:16px;max-width:100% !important;width:100%;height:auto !important;" src="https://marketing-image-production.s3.amazonaws.com/uploads/ccda61b2525a7a51e0b4da0eb41fe5d317195f65ad36f37e34e054792f8ecc1ed8ad76aaf34fb572471e453d8f46add712059608625f081cc5e577b3bda6f235.png" alt="Youtube" width="212"></a>
<a style="width:40px;height:40px;display:inline-block;margin-right:15px;" href="https://www.instagram.com/multiopticas_pt/"><img class="max-width" border="0" style="display:block;color:#000000;text-decoration:none;font-family:Helvetica, arial, sans-serif;font-size:16px;max-width:100% !important;width:100%;height:auto !important;" src="https://marketing-image-production.s3.amazonaws.com/uploads/9939ea844c28bc1470f1c600f423e3d85d8b7c8d39e2ee7f1676addfc588cfde46bfcf933cb0ccd9a79aa4ec65d01a9d438b6da911400106dfd626d18a36d0bf.png" alt="Instagram" width="212"></a>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]>
</td></tr></table>
</center>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</center>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment