This email was specifically built to be used within Salesforce (Pardot). It is built with muiltiple section where the MA team can then choose and edit and only use the ones the need for an email.
British Gas
Full HTML code:
This is the code for the email
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title> </title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
@font-face {
font-family: "BGFlame-Light";
src: url("https://go.business.britishgas.co.uk/l/465112/2020-04-06/23qvvd/465112/64465/BGFlame_Regular.ttf") format("truetype");
}
* {
padding: 0;
margin: 0;
}
#outlook a {
padding: 0;
}
a, a:link, a:visited {text-decoration: none; color: #009aff;}
a:hover {text-decoration: underline;}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
</style>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG />
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.full-width {
width: 100% !important;
}
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
</style>
<!--<![endif]-->
<style type="text/css">
@media only screen and (max-width: 650px) {
.mob-block {display: block !important;}
/* By Aury Silva*/
.full-width {
width: 100% !important;
text-align: center !important;
word-break: break-word;
}
table {
max-width: 650px !important;
}
td {
width: 100% !important;
max-width: 650px !important;
text-align: center !important;
}
.mob-inline {
display: inline-block;
}
.no-mob {
display: none !important;
}
.mob-pad {
padding: 20px 20px !important;
}
.mob-center {
text-align: center !important;
}
}
</style>
<style type="text/css">
@media only screen and (max-width: 480px) {
*[class~="hide_on_mobile"] {
display: none !important;
}
}
</style>
</head>
<body style="word-spacing: normal; background-color: #e8e8e8;">
<table style="width: 100%; background: #e8e8e8;">
<tr>
<td>
<center>
<table style="width: 650px; background: #e8e8e8; margin: 0 auto; text-align: left;">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 650px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<tr>
<td style="max-width: 650px; margin: 0 auto;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="max-width: 650px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<!-- Top header -->
<tr pardot-repeatable="">
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff" class="full-width">
<tr>
<td style="padding: 5px 5px 5px 5px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<tr pardot-repeatable="">
<td pardot-region="" align="center" style="padding: 15px 15px 15px 15px; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 2; text-align: center; color: #333333;" class="full-width">
Quarterly Report | <a href="#" target="_blank">View in browser</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Banner 1 -->
<tr pardot-repeatable="">
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff" class="full-width">
<tr>
<td height="325" bgcolor="#009aff" style="padding: 0 0 0 0;" class="full-width mob-center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff" >
<tr>
<td height="325" bgcolor="#009aff" class="full-width mob-center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff" class="full-width">
<tr>
<!-- Left banner text -->
<td pardot-repeatable="" width="325" height="325" bgcolor="#009aff" class="full-width">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr>
<td style="padding: 30px 5px 30px 30px;" class="mob-pad">
<table>
<tr>
<td width="100%" class="mob-center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr pardot-repeatable="">
<td style="padding: 0px 0px 25px 0px;" class="mob-center">
<img pardot-region="" src="https://storage.pardot.com/465112/1624894368bZNgJYSa/Logo_DEV.png" width="130" alt="" class="full-width" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:130px;height:auto; ">
</td>
</tr>
<tr pardot-repeatable="">
<td pardot-region="" style="padding: 0px 0px 20px 0px; font-family: Arial, sans-serif;font-size: 32px;line-height: 1.2;text-align: left;color: #ffffff;" class="mob-center">
Lorem ipsum dolor sit amet consectetur
</td>
</tr>
<tr pardot-repeatable="">
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr pardot-repeatable="">
<td style="padding: 0px 0px 22px 0px;" class="mob-center">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywhg/465112/1638843875ZubmtWWR/CTAWhite_Findoutmore.V4.png" width="136" height="36" pardot-width="136" pardot-height="36" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:136px; height:36px; max-height: 36px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- Right banner image -->
<td pardot-repeatable="" width="325" height="325" bgcolor="#009aff" class="no-mob">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr pardot-repeatable="">
<td>
<img pardot-region="" class="full-width" alt="" src="https://go.business.britishgas.co.uk/l/465112/2022-01-11/262bx7/465112/1641918644EefQ88NE/banner_man.png" width="325" height="325" pardot-width="325" pardot-height="325" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:325px; height:325px; max-height: 325px; ">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- // Right banner image -->
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Banner 2 -->
<tr pardot-repeatable="">
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr>
<td height="325" bgcolor="#009aff" style="padding: 0 0 0 0;" class="full-width">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr>
<td height="325" bgcolor="#009aff" class="full-width">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr>
<!-- Left banner image -->
<td pardot-repeatable="" width="325" height="325" bgcolor="#009aff" class="full-width no-mob">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr pardot-repeatable="">
<td>
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2021-08-10/25r3kh/465112/1628587698dIl3wzyr/4819.005.BG.July.HTML.BannersOPT2_1.C5.png" width="325" height="325" pardot-width="325" pardot-height="325" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:325px; height:325px; max-height: 325px; ">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- Right banner text -->
<td pardot-repeatable="" width="325" height="325" bgcolor="#009aff" class="full-width">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr>
<td style="padding: 30px 30px 30px 5px;" class="mob-pad">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr>
<td class="mob-center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr pardot-repeatable="">
<td pardot-region="" style="padding: 0px 0px 20px 0px; font-family: Arial, sans-serif;font-size: 32px;line-height: 1.2;text-align: left; color: #ffffff;" class="mob-center">
Lorem ipsum dolor sit amet consectetur
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0px 0px 22px 0px;">
<img pardot-region="" class="full-width" alt="" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywhg/465112/1638843875ZubmtWWR/CTAWhite_Findoutmore.V4.png" width="136" height="36" pardot-width="136" pardot-height="36" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:136px; height:36px; max-height: 36px; ">
</td>
</tr>
<tr pardot-repeatable="">
<td align="right" width="325" style="padding: 0px 0px 21px 0px;" class="full-width mob-center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr pardot-repeatable="">
<td align="right" class="mob-center">
<img pardot-region="" src="https://storage.pardot.com/465112/1624894368bZNgJYSa/Logo_DEV.png" width="130" alt="" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:130px;height:auto;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- // Right banner text -->
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // Banner 2 -->
<!-- Body rows -->
<tr>
<td style="width:100%; max-width: 650px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff" class="full-width">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding: 35px 60px 35px 60px;" class="full-width mob-pad">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 650px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<tr>
<td width="530" style="width:100%; max-width: 530px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<!-- First body row -->
<tr pardot-repeatable="">
<td width="530" align="center" style="padding: 0 0 40px 0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr pardot-repeatable="">
<td pardot-region="" style="padding: 0 0 20px 0; font-family: Arial, sans-serif; font-size: 22px; line-height: 1; text-align: center; color: #0099ff">
Dear %%first_name%%,
</td>
</tr>
<tr pardot-repeatable="">
<td pardot-region="" style="padding: 0 0 20px 0; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: center; color: #333333;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae aliquet erat. In eleifend mollis nisl, non suscipit elit pretium in. Vivamus aliquam sem non blandit dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer maximus ac odio sit amet ornare.
</td>
</tr>
<tr pardot-repeatable="">
<td pardot-region="" align="center" width="100%" style="width: 100%;">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywh4/465112/1638841816cdacHAUF/CTABlue_Findoutmore.V2.png" width="136" height="36" pardot-width="136" pardot-height="36" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:136px; height:36px; max-height: 36px; ">
</td>
</tr>
</table>
</td>
</tr>
<!-- 2nd body row -->
<tr pardot-repeatable="">
<td width="530" align="left" style="padding: 0 0 40px 0;" class="full-width mob-pad mob-center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr pardot-repeatable="">
<td pardot-region="" style="padding: 0 0 20px 0; font-family: Arial, sans-serif; font-size: 22px; line-height: 1; text-align: left; color: #0099ff" class="mob-center">
Dear %%first_name%%,
</td>
</tr>
<tr pardot-repeatable="">
<td pardot-region="" style="padding: 0 0 20px 0; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: left; color: #333333;" class="mob-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae aliquet erat. In eleifend mollis nisl, non suscipit elit pretium in. Vivamus aliquam sem non blandit dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer maximus ac odio sit amet ornare.
</td>
</tr>
<tr pardot-repeatable="">
<td align="left" width="100%" style="width: 100%;" class="mob-center">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywh4/465112/1638841816cdacHAUF/CTABlue_Findoutmore.V2.png" width="136" height="36" pardot-width="136" pardot-height="36" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:136px; height:36px; max-height: 36px; ">
</td>
</tr>
</table>
</td>
</tr>
<!-- 3rd body row -->
<tr pardot-repeatable="">
<td width="530" align="center" style="padding: 0 0 0 0; direction: ltr;" class="mob-center full-width">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td pardot-repeatable="" width="265" class="mob-inline">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" style="padding: 0 0 0 0;" class="mob-center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="left" pardot-region="" style="padding: 0 0 20px 0; text-align: left;" class="mob-center">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2021-08-11/25r723/465112/1628672080vpL6zKs7/4189.005.BG.July.HTML.ImagesOPT1_1.C5.png" width="250" height="250" pardot-width="250" pardot-height="250" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:240px; height:240px; max-height: 240px; ">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td pardot-repeatable="" width="265" class="mob-inline" style="vertical-align: top; padding: 0px 5px 5px; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: left; color: #333333;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr pardot-repeatable="">
<td style="padding: 0;" class="full-width">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td pardot-region="" style="padding: 0 0 15px 0; font-family: Arial, sans-serif; font-size: 22px; line-height: 1.2; text-align: left; color: #0099ff" class="mob-center">
Nam in accumsan metus
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 265px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<tr>
<td pardot-region="" style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: left; color: #333333;" class="mob-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae aliquet erat. In eleifend mollis nisl, non suscipit elit.
<br><br>
Vivamus aliquam sem non blandit
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 20px 0 0 0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 265px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<tr>
<td align="center" width="100%" style="width: 100%;">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywh4/465112/1638841816cdacHAUF/CTABlue_Findoutmore.V2.png" width="136" height="36" pardot-width="136" pardot-height="36" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:136px; height:36px; max-height: 36px; ">
</td>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- 4th body row texts -->
<tr pardot-repeatable="">
<td width="530" align="center" style="padding: 35px 0 5px 0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td pardot-region="" align="center" style="padding: 0 0 20px 0; font-family: Arial, sans-serif; font-size: 22px; line-height: 1; text-align: center; color: #0099ff">
Morbi non enim nulla
</td>
</tr>
<tr>
<td align="center" pardot-region="" style="padding: 0 0 20px 0; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: center; color: #333333;">
Sed a hendrerit sapien, ut feugiat tortor. Phasellus placerat luctus congue. Nunc sagittis, libero et finibus malesuada, nisl ante lobortis risus, in luctus libero velit sed nibh. Phasellus nec quam enim. Suspendisse viverra volutpat nisi sit amet mollis.
</td>
</tr>
</table>
</td>
</tr>
<!-- 5th body row 3 icons -->
<tr pardot-repeatable="">
<td width="530" align="center" style="padding: 5px 0 0px 0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="530" align="center" style="padding: 10px 10px 10px 10px; max-width: 170px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<!-- col -->
<td pardot-repeatable="" align="center" width="170" style="max-width: 170px; display: inline-block; text-align: center;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 170px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<tr>
<td width="170" align="center" style="padding: 10px 10px 10px 10px; max-width: 170px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 170px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<tr>
<td width="100%" align="center" pardot-region="" style="padding: 0 0 20px 0;">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2022-01-11/262c1k/465112/1641919297rozWJRBr/4819.005.BG.July.HTML.Icon.Blue_Electricity.C5.png" width="80" height="80" pardot-width="80" pardot-height="80" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:80px; height:80px; max-height: 80px; ">
</td>
</tr>
<tr>
<td pardot-region="" align="center" style="padding: 0 0 10px 0; font-family: 'BGFlame-Light', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.3; text-align: center; color: #0099ff">
Lorem ipsum dolor sit amet consectetur
</td>
</tr>
<tr>
<td align="center" pardot-region="" style="padding: 0 0 20px 0; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: center; color: #333333;">
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus.
</td>
</tr>
<tr>
<td width="100%" align="center" pardot-region="" style="padding: 0 0 20px 0;">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywh4/465112/1638841816cdacHAUF/CTABlue_Findoutmore.V2.png" width="136" height="36" pardot-width="136" pardot-height="36" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:136px; height:36px; max-height: 36px; ">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- col -->
<td pardot-repeatable="" align="center" width="170" style="max-width: 170px; display: inline-block; text-align: center;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 170px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<tr>
<td width="170" align="center" style="padding: 10px 10px 10px 10px; max-width: 170px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 170px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<tr>
<td width="100%" align="center" pardot-region="" style="padding: 0 0 20px 0;">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2022-01-11/262c1p/465112/1641919318NqvIunjz/4819.005.BG.July.HTML.Icon.Blue_ReportDashboard.C5.pngg" width="80" height="80" pardot-width="80" pardot-height="80" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:80px; height:80px; max-height: 80px; ">
</td>
</tr>
<tr>
<td pardot-region="" align="center" style="padding: 0 0 10px 0; font-family: 'BGFlame-Light', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.3; text-align: center; color: #0099ff">
Lorem ipsum dolor sit amet consectetur
</td>
</tr>
<tr>
<td align="center" pardot-region="" style="padding: 0 0 20px 0; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: center; color: #333333;">
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus.
</td>
</tr>
<tr>
<td width="100%" align="center" pardot-region="" style="padding: 0 0 20px 0;">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywh4/465112/1638841816cdacHAUF/CTABlue_Findoutmore.V2.png" width="136" height="36" pardot-width="136" pardot-height="36" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:136px; height:36px; max-height: 36px; ">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- col -->
<td pardot-repeatable="" align="center" width="170" style="max-width: 170px; display: inline-block; text-align: center;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 170px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<tr>
<td width="170" align="center" style="padding: 10px 10px 10px 10px; max-width: 170px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 170px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<tr>
<td width="100%" align="center" pardot-region="" style="padding: 0 0 20px 0;">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2022-01-11/262c1m/465112/1641919308orWqqfe8/4819.005.BG.July.HTML.Icon.Blue_Gas.C5.png" width="80" height="80" pardot-width="80" pardot-height="80" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:80px; height:80px; max-height: 80px; ">
</td>
</tr>
<tr>
<td pardot-region="" align="center" style="padding: 0 0 10px 0; font-family: 'BGFlame-Light', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.3; text-align: center; color: #0099ff">
Lorem ipsum dolor sit amet consectetur
</td>
</tr>
<tr>
<td align="center" pardot-region="" style="padding: 0 0 20px 0; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: center; color: #333333;">
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus.
</td>
</tr>
<tr>
<td width="100%" align="center" pardot-region="" style="padding: 0 0 20px 0;">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywh4/465112/1638841816cdacHAUF/CTABlue_Findoutmore.V2.png" width="136" height="36" pardot-width="136" pardot-height="36" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:136px; height:36px; max-height: 36px; ">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- // col -->
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- 6th body row 1 icon and text -->
<tr pardot-repeatable="">
<td width="530" style="display: block;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="530">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="110" align="left" class="mob-inline" style="padding: 0 0 20px 0;">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2022-01-11/262c1h/465112/1641919285pfyshpv5/4819.005.BG.July.HTML.Icon.Blue_Diary_Calendar.C5.png" width="80" height="80" pardot-width="80" pardot-height="80" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:80px; height:80px; max-height: 80px; ">
</td>
<td width="440" class="mob-inline" style="vertical-align: top;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 450px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<tr>
<td pardot-region="" style="padding: 0 0 10px 0; font-family: Arial, sans-serif; font-size: 16px; line-height: 26px; text-align: left; color: #0099ff">
Lorem ipsum dolor sit amet consectetur
</td>
</tr>
<tr>
<td pardot-region="" style="font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; text-align: left; color: #333333;">
Sed a hendrerit sapien, ut feugiat tortor. Phasellus placerat luctus congue. Nunc sagittis, libero et finibus malesuada, nisl ante lobortis risus, in luctus libero velit sed nibh. Phasellus nec quam enim.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Grey footer -->
<tr pardot-repeatable="">
<td width="650" style="width: 650px; max-width: 650px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 650px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 650px; background-color: #505050; font-family: Arial, sans-serif;" width="100%" bgcolor="#505050">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 650px; background-color: #505050; font-family: Arial, sans-serif;" width="100%" bgcolor="#505050">
<tr>
<td width="100%" align="center" pardot-region="" style="width: 650px;">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2022-01-11/262bxt/465112/1641918836KSBABWUN/bg_grey.png" width="650" height="89" pardot-width="650" pardot-height="89" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:650px; height:auto; max-height: 89px; ">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="650" align="center" bgcolor="#505050" style="background-color: #505050;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#505050">
<tr>
<td width="650" align="center" pardot-region="" style="width: 100%; max-width: 650px; padding: 20px 80px 50px 80px; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 10px; line-height: 17px; color: #ffffff; background-color: #505050;">
British Gas Trading Limited are registered in England and Wales (company number 03078711) and our registered office is Millstream, Maidenhead Road, Windsor, Berkshire, SL4 5GD. British Gas is a Centrica business.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Blue footer -->
<tr pardot-repeatable="">
<td width="650" style="width: 650px; max-width: 650px;" class="full-width">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 650px; background-color: #ffffff; font-family: Arial, sans-serif;" width="100%" bgcolor="#ffffff">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 650px; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr pardot-region="">
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 650px; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr>
<td width="100%" align="center" pardot-region="" style="width: 650px;">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2022-01-11/262cw3/465112/1641952840tv7DgmUJ/Bottom_DEV_Blue.V2.jpg" width="650" height="89" pardot-width="650" pardot-height="89" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:650px; height:89px; max-height: 89px; ">
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-region="">
<td width="650" align="center" bgcolor="#009aff" style="background-color: #009aff;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width: 450px; background-color: #009aff; font-family: Arial, sans-serif;" width="100%" bgcolor="#009aff">
<tr>
<td width="650" align="center" pardot-region="" style="width: 100%; max-width: 650px; padding: 20px 80px 50px 80px; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 10px; line-height: 17px; color: #ffffff; background-color: #009aff;">
British Gas Trading Limited are registered in England and Wales (company number 03078711) and our registered office is Millstream, Maidenhead Road, Windsor, Berkshire, SL4 5GD. British Gas is a Centrica business.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td width="650" style="width: 650px; max-width: 650px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#e8e8e8">
<tr>
<td width="200" align="center" class="mob-inline full-width no-mob">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#e8e8e8">
<tr>
<td style="padding: 5px 5px 5px 5px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#e8e8e8">
<tr>
<td align="center">
<img pardot-region="" alt="" src="https://go.business.britishgas.co.uk/l/465112/2021-06-28/25n96c/465112/1624895655zhppdz8D/TW_DEV.png" width="25" height="25" pardot-width="25" pardot-height="25" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:25px; height:30px; max-height: 25px;">
</td>
<td align="center" style="width: 30px; padding: 5px 5px 5px 5px;">
<img pardot-region="" alt="" src="https://storage.pardot.com/465112/1624895735nEwjfOp6/YT_DEV.png" width="30" height="25" pardot-width="30" pardot-height="25" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:30px; height:25px; max-height: 25px;">
</td>
<td align="center">
<img pardot-region="" alt="" src="https://storage.pardot.com/465112/1624895987BrFKz3OK/LI_DEV.png" width="30" height="30" pardot-width="30" pardot-height="30" style="border-width:0;-ms-interpolation-mode:bicubic;width:100%;max-width:30px; height:30px; max-height: 30px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="325">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#e8e8e8">
<tr>
<td class="mob-inline full-width" style=" padding: 20px 5px 20px 0; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; text-align: right; text-decoration: none; color: #333333;">
<a href="https://www.britishgas.co.uk/business" text-decoration="none">T&Cs</a> | <a href="https://www.britishgas.co.uk/business" text-decoration="none">Privacy Policy</a> | <a href="%%unsubscribe%%" text-decoration="none">Unsubscribe</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>
Here is an optimised version that contains less code and is fully compatible with Salesforce (Pardot) and different ESP including the most popular ones such as Outlook, Gmail, and Apple mail
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title> </title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
@font-face {
font-family: "BGFlame-Light";
src: url("https://go.business.britishgas.co.uk/l/465112/2020-04-06/23qvvd/465112/64465/BGFlame_Regular.ttf") format("truetype");
}
#outlook a {
padding: 0;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
color: #333333;
font-size: 13px;
background-color: #e8e8e8;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
table {
border-spacing: 0;
}
td {
padding: 0;
font-family: Arial, sans-serif;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
img {
border: 0;
}
p {
padding: 0;
margin: 0;
}
.wrapper {
width: 100%;
table-layout: fixed;
background-color: #e8e8e8;
padding-bottom: 0px;
font-size: 13px;
color: #333333;
}
.main {
background-color: #ffffff;
margin: 0 auto;
width: 100%;
max-width: 650px;
border-spacing: 0;
font-size: 16px;
line-height: 21px;
font-family: sans-serif;
color: #171a1b;
}
.three-columns {
width: 33%;
display: inline-block;
}
.two-columns {
width: 50%;
display: inline-block;
}
.column {
width: 100%;
display: block;
}
.top-header-social {
padding: 0 3px;
}
/* General styles */
.align-top {
vertical-align: top;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.font-13 {
font-size: 13px;
}
.font-15 {
font-size: 14px;
}
.font-22 {
font-size: 22px;
}
.text-dark {
color: #333333;
}
.text-white {
color: #ffffff;
}
.text-blue {
color: #0099ff;
}
.white-bg {
background-color: #ffffff;
}
.blue-bg {
background-color: #0099ff;
}
/* Pardot Edit reset*/
*[pardot-region]:empty {
padding: 0px !important;
}
</style>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG />
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix {
width: 100% !important;
}
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
</style>
<!--<![endif]-->
<style type="text/css">
@media all and (max-width: 650px) {
.no-mob {
display: none !important;
}
.mob-center {
text-align: center !important;
}
.three-columns, .two-columns, .column {
width: 100%;
display: inline-block;
}
td {
display: inline-block; text-align: center !important;
}
.mob-pd-35-0 {
padding: 35px 0 35px 0 !important;
}
.mob-pd-20-0 {
padding: 20px 0 20px 0 !important;
}
}
</style>
</style>
</head>
<body style="word-spacing: normal; background-color: #e8e8e8">
<center class="wrapper">
<table class="main">
<!-- TOP HEADER -->
<tr pardot-repeatable="">
<td class="column">
<table width="100%">
<tr>
<td align="center" class="culumn mob-pd-20-0" style="padding: 10px 20px 10px 20px;">
<table width="100%">
<tr>
<td align="center" class="column">
<p pardot-region="" class="text-center font-13 mob-center" style="text-align: center; font-size: 13px; color: #333333; ">
Quarterly Report | <a href="">View in browser</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // TOP HEADER -->
<!-- BANNER 1 -->
<tr pardot-repeatable="">
<td width="100%" height="auto" class="blue-bg" style="padding: 0 0 0 0;">
<table width="100%" bgcolor="#0099ff">
<tr>
<td pardot-repeatable="" class="two-columns" style="height: 325px; min-height: 325px; max-height: 325px;">
<table width="100%">
<td class="mob-pd-35-0" style="padding: 35px 5px 35px 35px;">
<table width="100%">
<tr>
<td style="padding: 0 0 20px 0;">
<table width="100%">
<tr>
<td>
<img pardot-region="" width="150" height="92" style="width: 100%; max-width: 150px; height: 92px; max-height: 92px; border: 0; display: block; outline: none; text-decoration: none;" src="https://storage.pardot.com/465112/1624894368bZNgJYSa/Logo_DEV.png">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 0px 0px 20px 0px;">
<table width="100%">
<tr>
<td class="mob-center">
<p pardot-region="" class="mob-center" style="padding: 0px 0px 0px 0px; font-family: Arial, sans-serif; font-size: 30px;line-height: 1.2;text-align: left; color: #ffffff;">
Lorem ipsum dolor sit amet consectetur
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 0px 0px 20px 0px;">
<table width="100%">
<tr>
<td>
<img pardot-region="" width="136" height="36" style="width: 100%; max-width: 136px; height: 36px; max-height: 36px; border: 0; display: block; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywhg/465112/1638843875ZubmtWWR/CTAWhite_Findoutmore.V4.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</table>
</td>
<td pardot-repeatable="" class="two-columns no-mob" style="height: 325px; min-height: 325px; max-height: 325px;">
<table width="100%">
<tr>
<td style="height: 325px; min-height: 325px; max-height: 325px;">
<table width="100%">
<tr>
<td style="height: 325px; min-height: 325px; max-height: 325px;">
<img pardot-region="" width="325" height="325" style="width: 100%; max-width: 325px; height: 325px; max-height: 325px; border: 0; display: block; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2022-01-11/262bx7/465112/1641918644EefQ88NE/banner_man.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // BANNER 1 -->
<!-- BANNER 2 -->
<tr pardot-repeatable="">
<td width="100%" height="auto" class="blue-bg" style="padding: 0 0 0 0;">
<table width="100%" bgcolor="#0099ff">
<tr>
<td pardot-repeatable="" class="two-columns no-mob" style="height: 325px; min-height: 325px; max-height: 325px;">
<table width="100%">
<tr>
<td style="height: 325px; min-height: 325px; max-height: 325px;">
<table width="100%">
<tr>
<td style="height: 325px; min-height: 325px; max-height: 325px;">
<img pardot-region="" width="325" height="325" style="width: 100%; max-width: 325px; height: 325px; max-height: 325px; border: 0; display: block; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2021-08-10/25r3kh/465112/1628587698dIl3wzyr/4819.005.BG.July.HTML.BannersOPT2_1.C5.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td pardot-repeatable="" class="two-columns" style="height: 325px; min-height: 325px; max-height: 325px;">
<table width="100%">
<td class="mob-pd-35-0" style="padding: 35px 5px 35px 5px;">
<table width="100%">
<tr pardot-repeatable="">
<td style="padding: 0 0 20px 0;">
<table width="100%">
<tr>
<td>
<img pardot-region="" width="150" height="92" style="width: 100%; max-width: 150px; height: 92px; max-height: 92px; border: 0; display: block; outline: none; text-decoration: none;" src="https://storage.pardot.com/465112/1624894368bZNgJYSa/Logo_DEV.png">
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0px 0px 20px 0px;">
<table width="100%">
<tr>
<td class="mob-center">
<p pardot-region="" class="mob-center" style="padding: 0px 0px 0px 0px; font-family: Arial, sans-serif; font-size: 30px;line-height: 1.2;text-align: left; color: #ffffff;">
Lorem ipsum dolor sit amet consectetur
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0px 0px 20px 0px;">
<table width="100%">
<tr>
<td>
<img pardot-region="" width="136" height="36" style="width: 100%; max-width: 136px; height: 36px; max-height: 36px; border: 0; display: block; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywhg/465112/1638843875ZubmtWWR/CTAWhite_Findoutmore.V4.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // BANNER 2 -->
<!-- BODY ROW 1 -->
<tr pardot-repeatable="">
<td style="padding: 35px 55px 35px 55px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr pardot-repeatable="">
<td align="center" style="padding: 0 0 25px 0;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="center" class="column">
<p pardot-region="" class="text-center font-22 text-blue" style="text-align: center; font-size: 22px; color: #0099ff;">
Dear %%first_name%%,
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0 0 25px 0;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="center" class="column">
<p pardot-region="" class="text-center font-13 text-dark" style="text-align: center; font-size: 13px; color: #333333;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae aliquet erat. In eleifend mollis nisl, non suscipit elit pretium in. Vivamus aliquam sem non blandit dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer maximus ac odio sit amet ornare.
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0 0 25px 0;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="center" class="column text-center">
<img pardot-region="" width="136" height="36" style="width: 100%; max-width: 136px; height: 36px; max-height: 36px; border: 0; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywh4/465112/1638841816cdacHAUF/CTABlue_Findoutmore.V2.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // BODY ROW 1 -->
<!-- BODY ROW 2 -->
<tr pardot-repeatable="">
<td style="padding: 0px 55px 35px 55px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr pardot-repeatable="">
<td style="padding: 0 0 25px 0;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="column">
<p pardot-region="" class="text-left font-22 text-blue mob-center" style="text-align: left; font-size: 22px; color: #0099ff;">
Dear %%first_name%%,
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0 0 25px 0;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="column">
<p pardot-region="" class="text-left font-13 text-dark mob-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae aliquet erat. In eleifend mollis nisl, non suscipit elit pretium in. Vivamus aliquam sem non blandit dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer maximus ac odio sit amet ornare.
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0 0 25px 0;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="column text-left mob-center">
<img pardot-region="" width="136" height="36" style="width: 100%; max-width: 136px; height: 36px; max-height: 36px; border: 0; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywh4/465112/1638841816cdacHAUF/CTABlue_Findoutmore.V2.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // BODY ROW 2 -->
<!-- BODY ROW 3 image and text -->
<tr pardot-repeatable="">
<td style="padding: 0px 55px 35px 55px;">
<table width="100%">
<tr>
<td class="two-columns">
<table width="100%">
<tr>
<td style="padding: 0 0 10px 0;">
<table width="100%">
<tr>
<td class="mob-center">
<img pardot-region="" width="250" height="250" style="width: 100%; max-width: 250px; height: 250px; max-height: 250px; border: 0; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2021-08-11/25r723/465112/1628672080vpL6zKs7/4189.005.BG.July.HTML.ImagesOPT1_1.C5.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td pardot-repeatable="" class="two-columns align-top">
<table width="100%">
<tr pardot-repeatable="">
<td class="mob-center">
<p pardot-region="" class="text-left font-22 text-blue mob-center" style="text-align: left; font-size: 22px; color: #0099ff;">
Nam in accumsan metus
</p>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 10px 0 0 0;">
<table width="100%">
<tr>
<td class="column">
<p pardot-region="" class="text-left font-13 text-dark mob-center" style="text-align: left; font-size: 13px; color: #333333;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae aliquet erat. In eleifend mollis nisl, non suscipit elit.us
<br><br>
Vivamus aliquam sem non blandit
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 20px 0 0 0;">
<table width="100%">
<tr>
<td>
<table width="100%">
<tr>
<td class="mob-center">
<img pardot-region="" width="136" height="36" style="width: 100%; max-width: 136px; height: 36px; max-height: 36px; border: 0; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywh4/465112/1638841816cdacHAUF/CTABlue_Findoutmore.V2.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // BODY ROW 3 image and text -->
<!-- BODY ROW 4 text centered -->
<tr pardot-repeatable="">
<td style="padding: 0px 55px 35px 55px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr pardot-repeatable="">
<td style="padding: 0 0 25px 0;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="column">
<p pardot-region="" class="text-center font-22 text-blue" style="text-align: center; font-size: 22px; color: #0099ff;">
Morbi non enim nulla
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0 0 5px 0;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="column">
<p pardot-region="" class="text-center font-13 text-dark" style="text-align: center; font-size: 13px; color: #333333;">
Sed a hendrerit sapien, ut feugiat tortor. Phasellus placerat luctus congue. Nunc sagittis, libero et finibus malesuada, nisl ante lobortis risus, in luctus libero velit sed nibh. Phasellus nec quam enim. Suspendisse viverra volutpat nisi sit amet mollis.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // BODY ROW 4 text centered -->
<!-- BODY ROW 5 image icon and text -->
<tr pardot-repeatable="">
<td style="padding: 0px 55px 15px 55px;">
<table width="100%" class="column">
<tr>
<!-- col -->
<td class="three-columns">
<table width="100%">
<tr>
<td style="padding: 0 10px 0 10px;">
<table width="100%">
<tr pardot-repeatable="">
<td style="padding: 0 0 20px 0">
<table width="100%">
<tr>
<td class="text-center">
<img pardot-region="" width="80" height="80" style="width: 100%; max-width: 80px; height: 80px; max-height: 80px; border: 0; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2022-01-11/262c1k/465112/1641919297rozWJRBr/4819.005.BG.July.HTML.Icon.Blue_Electricity.C5.png">
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0 0 10px 0">
<table width="100%">
<tr>
<td align="center">
<p pardot-region="" class="text-center font-15 text-blue" style="text-align: center; font-size: 15px; color: #0099ff;">
Lorem ipsum dolor sit amet consectetur
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0 0 15px 0">
<table width="100%">
<tr>
<td align="center">
<p pardot-region="" class="text-center font-13 text-dark" style="text-align: center; font-size: 13px; color: #333333;">
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus.
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0 0 35px 0;">
<table width="100%">
<tr>
<td align="center" class="text-center">
<img pardot-region="" width="136" height="36" style="width: 100%; max-width: 136px; height: 36px; max-height: 36px; border: 0; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywh4/465112/1638841816cdacHAUF/CTABlue_Findoutmore.V2.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- // col -->
<!-- col -->
<td pardot-repeatable="" class="three-columns">
<table width="100%">
<tr>
<td style="padding: 0 10px 0 10px;">
<table width="100%">
<tr pardot-repeatable="">
<td style="padding: 0 0 20px 0">
<table width="100%">
<tr>
<td class="text-center">
<img pardot-region="" width="80" height="80" style="width: 100%; max-width: 80px; height: 80px; max-height: 80px; border: 0; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2022-01-11/262c1p/465112/1641919318NqvIunjz/4819.005.BG.July.HTML.Icon.Blue_ReportDashboard.C5.pngg">
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0 0 10px 0">
<table width="100%">
<tr>
<td align="center">
<p pardot-region="" class="text-center font-15 text-blue" style="text-align: center; font-size: 15px; color: #0099ff;">
Lorem ipsum dolor sit amet consectetur
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0 0 15px 0">
<table width="100%">
<tr>
<td align="center">
<p pardot-region="" class="text-center font-13 text-dark" style="text-align: center; font-size: 13px; color: #333333;">
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus.
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0 0 35px 0;">
<table width="100%">
<tr>
<td class="text-center">
<img pardot-region="" width="136" height="36" style="width: 100%; max-width: 136px; height: 36px; max-height: 36px; border: 0; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywh4/465112/1638841816cdacHAUF/CTABlue_Findoutmore.V2.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- // col -->
<!-- col -->
<td pardot-repeatable="" class="three-columns">
<table width="100%">
<tr>
<td style="padding: 0 10px 0 10px;">
<table width="100%">
<tr pardot-repeatable="">
<td style="padding: 0 0 20px 0">
<table width="100%">
<tr>
<td class="text-center">
<img pardot-region="" width="80" height="80" style="width: 100%; max-width: 80px; height: 80px; max-height: 80px; border: 0; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2022-01-11/262c1m/465112/1641919308orWqqfe8/4819.005.BG.July.HTML.Icon.Blue_Gas.C5.png">
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0 0 10px 0">
<table width="100%">
<tr>
<td align="center">
<p pardot-region="" class="text-center font-15 text-blue" style="text-align: center; font-size: 15px; color: #0099ff;">
Lorem ipsum dolor sit amet consectetur
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0 0 15px 0">
<table width="100%">
<tr>
<td align="center">
<p pardot-region="" class="text-center font-13 text-dark" style="text-align: center; font-size: 13px; color: #333333;">
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus.
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 0 0 35px 0;">
<table width="100%">
<tr>
<td class="text-center">
<img pardot-region="" width="136" height="36" style="width: 100%; max-width: 136px; height: 36px; max-height: 36px; border: 0; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2021-12-06/25ywh4/465112/1638841816cdacHAUF/CTABlue_Findoutmore.V2.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- // col -->
</tr>
</table>
</td>
</tr>
<!-- // BODY ROW 5 image and text -->
<!-- BODY ROW 6 icon and text -->
<tr pardot-repeatable="">
<td style="padding: 0px 55px 55px 55px;">
<table width="100%">
<tr>
<td class="column">
<table width="100%">
<tr pardot-repeatable="">
<td pardot-repeatable="" width="85" class="mob-center" style="padding: 0 0 10px 0;">
<img pardot-region="" width="80" height="80" style="width: 100%; max-width: 80px; height: 80px; max-height: 80px; border: 0; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2022-01-11/262c1h/465112/1641919285pfyshpv5/4819.005.BG.July.HTML.Icon.Blue_Diary_Calendar.C5.png">
</td>
<td pardot-repeatable="" width="30" height="15px" class="mob-center no-mob" style="height: 15px;">
</td>
<td class="mob-center align-top">
<table width="100%">
<tr pardot-repeatable="">
<td style="padding: 0 0 10px 0;">
<p pardot-region="" class="text-left font-15 text-blue mob-center" style="text-align: left; font-size: 15px; color: #0099ff;">
Lorem ipsum dolor sit amet consectetur
</p>
</td>
</tr>
<tr pardot-repeatable="">
<td>
<p pardot-region="" class="text-left font-13 text-dark mob-center" style="text-align: left; font-size: 13px; color: #333333;">
Sed a hendrerit sapien, ut feugiat tortor. Phasellus placerat luctus congue. Nunc sagittis, libero et finibus malesuada, nisl ante lobortis risus, in luctus libero velit sed nibh. Phasellus nec quam enim.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // BODY ROW 6 icon and text -->
<!-- GREY FOOTER -->
<tr pardot-repeatable="">
<td style="background-color: #ffffff;">
<table width="100%" bgcolor="#505050" style="background-color: #505050;">
<tr pardot-repeatable="">
<td class="column" style="background-color: #505050;">
<table width="100%" class="column" bgcolor="#505050">
<tr>
<td class="column">
<img pardot-region="" width="650" height="auto" style="width: 100%; max-width: 650px; height: auto; max-height: 89px; border: 0; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2022-01-11/262bxt/465112/1641918836KSBABWUN/bg_grey.png">
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 10px 85px 30px 85px; background-color: #505050;">
<table width="100%" class="column" bgcolor="#505050">
<tr>
<td class="column">
<table width="100%" class="column" bgcolor="#505050">
<tr>
<td align="center">
<p pardot-region="" class="text-center text-white" style="text-align: center; font-size: 10px; color: #ffffff; line-height: 1.4">
British Gas Trading Limited are registered in England and Wales (company number 03078711) and our registered office is Millstream, Maidenhead Road, Windsor, Berkshire, SL4 5GD. British Gas is a Centrica business.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // GREY FOOTER -->
<!-- BLUE FOOTER -->
<tr pardot-repeatable="">
<td style="background-color: #ffffff;">
<table width="100%" bgcolor="#505050" style="background-color: #505050;">
<tr pardot-repeatable="">
<td class="column" style="background-color: #0099ff;">
<table width="100%" class="column" bgcolor="#0099ff">
<tr>
<td class="column">
<img pardot-region="" width="650" height="auto" style="width: 100%; max-width: 650px; height: auto; max-height: 89px; border: 0; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2022-01-11/262cw3/465112/1641952840tv7DgmUJ/Bottom_DEV_Blue.V2.jpg">
</td>
</tr>
</table>
</td>
</tr>
<tr pardot-repeatable="">
<td style="padding: 10px 85px 30px 85px; background-color: #0099ff;">
<table width="100%" class="column" bgcolor="#0099ff">
<tr>
<td class="column">
<table width="100%" class="column" bgcolor="#0099ff">
<tr>
<td align="center">
<p pardot-region="" class="text-center text-white" style="text-align: center; font-size: 10px; color: #ffffff; line-height: 1.4">
British Gas Trading Limited are registered in England and Wales (company number 03078711) and our registered office is Millstream, Maidenhead Road, Windsor, Berkshire, SL4 5GD. British Gas is a Centrica business.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // BLUE FOOTER -->
<!-- SOCIALS AND FOOTER LINKS -->
<tr pardot-repeatable="">
<td class="column">
<table width="100%" bgcolor="#e8e8e8" style="background-color: #e8e8e8;">
<tr>
<td class="column">
<table width="100%" bgcolor="#e8e8e8">
<tr>
<td class="mob-pd-20-0" style="padding: 15px 5px 10px 35px;">
<table width="100%" bgcolor="#e8e8e8">
<tr>
<td pardot-repeatable="" class="two-columns mob-center">
<table width="100%" bgcolor="#e8e8e8">
<tr>
<td>
<table width="140" bgcolor="#e8e8e8" style="width: 140px;">
<tr>
<td pardot-repeatable="" style="width: 45px; display: inline-block;">
<a href="https://twitter.com/intent/tweet?url=https://twitter.com/BritishGas_UKB" target="_blank" text-decoration="none">
<img pardot-region="" width="30" height="25" style="width: 100%; max-width: 30px; height: 25px; max-height: 25px; border: 0; outline: none; text-decoration: none;" src="https://go.business.britishgas.co.uk/l/465112/2021-06-28/25n96c/465112/1624895655zhppdz8D/TW_DEV.png">
</a>
</td>
<td pardot-repeatable="" style="width: 45px; display: inline-block;">
<a href="https://www.youtube.com/user/BritishGasBusiness/" target="_blank" text-decoration="none">
<img pardot-region="" width="30" height="25" style="width: 100%; max-width: 30px; height: 25px; max-height: 25px; border: 0; outline: none; text-decoration: none;" src="https://storage.pardot.com/465112/1624895735nEwjfOp6/YT_DEV.png">
</a>
</td>
<td pardot-repeatable="" style="width: 45px; display: inline-block;">
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.linkedin.com/company/british-gas-business/&title=&summary=&source=" target="_blank" text-decoration="none">
<img pardot-region="" width="30" height="25" style="width: 100%; max-width: 30px; height: 25px; max-height: 25px; border: 0; outline: none; text-decoration: none;" src="https://storage.pardot.com/465112/1624895987BrFKz3OK/LI_DEV.png">
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td pardot-repeatable="" class="two-columns mob-center">
<table width="100%">
<tr>
<td>
<table width="100%">
<tr>
<td style="font-family: Arial, sans-serif; font-size: 11px; line-height: 18px; text-align: right; text-decoration: none; color: #333333;">
<a pardot-region="" href="https://www.britishgas.co.uk/business" target="_blank" text-decoration="none">T&Cs</a>
|
<a pardot-region="" href="https://www.britishgas.co.uk/business" target="_blank" text-decoration="none">Privacy Policy</a>
|
<a pardot-region="" href="%%unsubscribe%%" target="_blank" text-decoration="none">Unsubscribe</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // SOCIALS AND FOOTER LINKS -->
</table>
</center>
</body>
</html>
