Central Dispatch Template Info #
This email template comes with four drag and drop regions. The top-left and top-right of the HERO AREA have a border-radius of 6px. The bottom-left and bottom right of the CONTENT AREA have a border-radius of 6px.
.hero{
border-radius: 6px 6px 0 0;
}
.content{
border-radius: 0 0 6px 6px;
}This gives the illusion that the Hero and Content area are one, with border-radius of 6px.
cd-email-template-ver-a.html
Copy to clipboard
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="x-apple-disable-message-reformatting" />
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>CentralDispatch</title>
<!--[if (gte mso 9)|(IE)]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if !mso]><!-->
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Saira+Semi+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap');
</style>
<!--<![endif]-->
<!--[if mso]>
<style type="text/css">
* { font-family: Arial, Helvetica, sans-serif !important; mso-hyphenate: none !important; }
body,table tr,table td,a, span,table.MsoNormalTable, .rev, .rev2{ font-family: Arial, Helvetica, sans-serif !important; }
</style>
<![endif]-->
<style>
:root { color-scheme: light dark; supported-color-schemes: light dark; }
* {-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: keep-all;-moz-hyphens: none;-ms-hyphens: none;-webkit-hyphens: none;hyphens: none;}
*[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; }
ReadMsgBody{ width: 100%;}
.ExternalClass {width: 100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
body {-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;margin:0 !important;}
p { margin: 1em 0;}
* img[tabindex="0"]+div { display: none !important; }
div[style*="margin: 16px 0"] { margin: 0 !important; }
table { border-collapse: collapse !important; border-spacing: 0 !important; margin: 0 auto !important; table-layout: fixed !important; }
table, td { mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; }
table td { border-collapse: collapse;}
table table table { table-layout: auto; }
img {outline:0;-ms-interpolation-mode: bicubic; }
a img {border:none;}
@-ms-viewport{ width: device-width;}
html, .body { background: #e5eaeb !important; height: 100% !important; margin: 0 auto !important; padding: 0 !important; width: 100% !important; -webkit-font-smoothing: antialiased; }
sup { vertical-align: top; position: relative; top: -0.5em; }
.x-gmail-data-detectors, .x-gmail-data-detectors *, .aBn { border-bottom: 0 !important; cursor: default !important; }
u+.body .gmail-blend-screen { background: #FFF; mix-blend-mode: screen; }
u+.body .gmail-blend-difference { background: #FFF; mix-blend-mode: difference; }
u+.body .keep-white { color: #ffffff !important; }
u+.body .keep-dark { color: #00333F !important; }
.link-a { color: #0585c8 !important; text-decoration: underline; }
.link-a:hover { color: #0585c8 !important; text-decoration: none; }
.buttonstyles:hover { background: -webkit-linear-gradient(#FFC20E 0%, #FFDF6B 100%) !important; background: -o-linear-gradient(#FFC20E 0%, #FFDF6B 100%) !important; background: linear-gradient(#FFC20E 0%, #FFDF6B 100%) !important; }
.button-stroke { background: -webkit-linear-gradient(#FFDF6B 0%, #FF821C 100%) !important; background: -o-linear-gradient(#FFDF6B 0%, #FF821C 100%) !important; background: linear-gradient(#FFDF6B 0%, #FF821C 100%) !important; padding: 1px !important; }
@media screen and (max-width: 600px) {
.resp-img { height: auto !important; margin-left: auto !important; margin-right: auto !important; max-width: 100% !important; width: 100% !important; }
.max-width-img { height: auto !important; max-width: 100% !important; }
.stack-column { direction: ltr !important; display: block !important; max-width: 100% !important; width: 100% !important; }
.stack-column-1 { padding-bottom: 10px !important; }
.stack-column-2 { text-align: center !important; }
.stack-column-1, .stack-column-2 { padding-left: 0px !important; padding-right: 0px !important; }
.stack-column-1 img, .stack-column-2 img { margin: 0 auto; }
.stack-column-img { max-width: 100% !important; width: 100% !important; }
.desktop { display: none; }
.mobile { display: block; }
}
@media screen and (min-width: 601px) {
.desktop { display: block; }
.mobile { display: none; }
}
/* Copy dark mode styles for android support */
/* Shows Dark Mode-Only Content, Like Images */
[data-ogsc] .dark-img { display: block !important; width: auto !important; overflow: visible !important; float: none !important; max-height: inherit !important; max-width: inherit !important; line-height: auto !important; margin-top: 0px !important; visibility: inherit !important; }
/* Hides Light Mode-Only Content, Like Images */
[data-ogsc] .light-img { display: none; display: none !important; }
/*Darkmode Styles*/
@media (prefers-color-scheme: dark) {
/* Shows Dark Mode-Only Content, Like Images */
.dark-img { display: block !important;width: auto !important;overflow: visible !important;float: none !important;max-height: inherit !important;max-width: inherit !important;line-height: auto !important;margin-top: 0px !important;visibility: inherit !important; }
/* Hides Light Mode-Only Content, Like Images */
.light-img { display: none; display: none !important; }
.rev { color: #ffffff !important; }
.rev2 { color: #FF821C !important; }
.div-line { border-bottom: solid 1px #ffffff !important; }
.darkmode { background-color: #4d4d4d !important; }
.darkmode2 { background-color: #222222 !important; }
.darkmode3 { background-color: #1b181d !important; }
.darkmode4 { background-color: #00252D !important; }
.body, .center-wrap, .darkmode5 { background-color: #415154 !important; }
.darkmode-teal { background-color: #002831 !important;}
.footer-a { color: #ffffff !important; }
u+.body .footer-a { color: #ffffff !important; }
u+.body .gmail-blend-screen { background: #FFF; mix-blend-mode: screen; }
u+.body .gmail-blend-difference { background: #FFF; mix-blend-mode: difference; }
}
</style>
</head>
<body style="margin: 0; mso-line-height-rule: exactly; width: 100% !important; background: #e5eaeb; height: 100% !important; background-repeat: no-repeat !important;" class="body">
<div style="font-size:0; line-height:0;">
<custom name="opencounter" type="tracking" />
<custom name="usermatch" type="tracking" />
</div>
<div style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;">
<!-- Preheader text : START --><!-- Preheader text : END -->
</div>
<center style="width: 100%; width: 100% !important;" class="center-wrap">
<!--[if mso]><table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="width: 100%;"><tr><td style="background: #e5eaeb;" bgcolor="#e5eaeb"><![endif]-->
<div style="max-width: 600px; margin: 0 auto;" class="email-container">
<!--[if mso]><table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="width: 600px;"><tr><td><![endif]-->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="width: 100%; max-width: 600px;">
<!-- OUTER CONTAINER : START -->
<tr>
<td style="padding: 0 10px 40px; background: #00333F;" class="darkmode4">
<!-- WRAP : START -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
<tr>
<td align="center" style="padding: 0;">
<!-- HEADER : START -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
<tr>
<td style="padding: 0; margin: 0;">
<div data-type="slot" data-key="cdheadercontent" data-label="HEADER AREA - DROP CONTENT BLOCKS HERE."></div>
</td>
</tr>
</table>
<!-- HEADER : END -->
<!-- HERO : START -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
<tr>
<td align="center" style="padding: 0px; background: #00333F;border-radius: 6px 6px 0 0 !important; overflow: hidden !important;" class="hero darkmode4">
<div data-type="slot" data-key="cdherocontent" data-label="HERO AREA - DROP CONTENT BLOCKS HERE."></div>
</td>
</tr>
</table>
<!-- HERO : END -->
<!-- MAIN CONTENT : START -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
<tr>
<td style="line-height: 1; background: #00333F;" class="darkmode4">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
<tr>
<td bgcolor="#ffffff" align="center" style="border-radius: 0 0 6px 6px !important; overflow: hidden !important;" class="darkmode">
<table cellspacing="0" cellpadding="0" style="width:100%">
<tr>
<td class="content responsive-td darkmode rev" valign="top" style="width: 100%; color: #495F69; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 26px; font-weight: 400;padding: 0; background-color: #FFFFFF; min-width: 100%;">
<div data-type="slot" data-key="cdemailcontent" data-label="BODY AREA - DROP CONTENT BLOCKS HERE."></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- MAIN CONTENT : END -->
<!-- FOOTER MODULE : START -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
<tr>
<td style="padding: 0px; background: #00333F;" class="darkmode4">
<div data-type="slot" data-key="cdfootercontent" data-label="FOOTER AREA - DROP CONTENT BLOCKS HERE."></div>
</td>
</tr>
</table>
<!-- FOOTER MODULE : END -->
</td>
</tr>
</table>
<!-- WRAP : END -->
</td>
</tr>
<!-- OUTER CONTAINER : END -->
</table>
<!--[if mso]></td></tr></table><![endif]-->
</div>
<!--[if mso]></td></tr></table><![endif]-->
</center>
</body>
</html>