Niven Ranchhod (@Nivicious88)

Started a new discussion: Spam comments not being cleared out? 2020-06-02 12:19:46
Replied to Discussion: Ipad Hybrid Fluid Issue in 3 column by Niven Ranchhod 2020-03-30 09:21:08
Hi Tahsin,
Looks like you didn't copy the codepen url properly.
Can you update the link so we can see your code?
Replied to Discussion: CSS Support by Niven Ranchhod 2020-03-30 09:19:50
Another tip is that inlining your CSS is definitely your safest option. You can use styles in the head for a lot of email clients but in all honesty, for a new starter to email building, I would inline everything and save yourself the hassle that can be caused by this method.
Replied to Discussion: CSS Support by Niven Ranchhod 2020-03-27 11:27:53
Hi Marc,
This is a simple one. It looks as though you're trying to nest CSS selectors like you would do in Sass or LESS.
You can certainly chain selectors
e.g. : .give-now .columns {...}
But you can't nest:
e.g. : .give-now { .columns {...} }
Replied to Discussion: Bulletproof background image not working on Outlook clients by Niven Ranchhod 2020-03-27 11:23:41
No problem Claire. Happy to help, any time :)
Replied to Discussion: Bulletproof background image not working on Outlook clients by Niven Ranchhod 2020-03-26 14:57:02
Hey Claire, looks like you're missing a display block on those images.
Adding that fixed it for me :)
Replied to Discussion: Bulletproof background image not working on Outlook clients by Niven Ranchhod 2020-03-19 11:01:25
Hi Claire,
A few issues here and one question:
Q: Why the use of a background image for that section? It doesn't look like you're overlaying anything at the moment anyway, unless you're withholding that for this fix?
If nothing will be overlay-ed, I would convert that to a simple image tag, it's a needless complication for you :)
Issues: It looks like your button VML code wasn't closed properly as some of the tags weren't completed and it was resulting in my Outlook tests in Litmus from loading incorrectly.
The unclosed VML was also affecting the background code, so fixed that, added a width and height to match your image's dimensions and then it all worked.
Try that and report any further issues.
<!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 http-equiv="X-UA-Compatible" content="IE=edge" /><!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting" /><!-- Disable auto-scale in iOS 10 Mail entirely -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"> <!-- 400 = Regular, 700 = bold -->
<title>Babylon Health — We’re for health, for all. We want to put an accessible and affordable health service in the hands of every person on earth</title><!-- The title tag shows in email notifications, like Android 4.4. -->

<style type="text/css">@media screen{ 
@font-face {
font-family:'visuelt bold';
font-style: normal;
src: url("https://www.babylonhealth.com/assets/fonts/visuelt-bold.woff2") format("woff");
}
@font-face {
font-family:'visuelt medium';
font-style: normal;
src: url("https://www.babylonhealth.com/assets/fonts/visuelt-medium.woff2") format("woff");
}
@font-face {
font-family:'visuelt';
font-style: normal;
src: url("https://www.babylonhealth.com/assets/fonts/visuelt-regular.woff2") format("woff");
}

@font-face {
font-family:'visuelt light';
font-style: normal;
src: url("https://www.babylonhealth.com/assets/fonts/visuelt-light.woff2") format("woff");
}
}
</style>
<!-- CSS Reset -->
<style>
/* What it does: Remove spaces around the email design added by some email clients. /
/ Beware: It can remove the padding / margin and add a background color to the compose a reply window. */

html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
background-color: #f3f6f9;
}

h1{
/*@editable*/color:#400099;
/*@editable*/font-family:'visuelt', helvetica, arial, sans-serif;
/*@editable*/font-size:40px;
/*@editable*/font-style:normal;
/*@editable*/font-weight:normal;
/*@editable*/line-height:125%;
/*@editable*/letter-spacing:normal;
/*@editable*/text-align:center;
/*@editable*/padding-top:0;
}
/*
@tab Page
@section Heading 2
@style heading 2
/
h2{
/@editable*/color:#2B065e;
/*@editable*/font-family:'visuelt medium', helvetica, arial, sans-serif;
/*@editable*/font-size:16px;
font-weight:500;
/*@editable*/font-style:normal;
/*@editable*/line-height:125%;
/*@editable*/letter-spacing:0.25px;
/*@editable*/text-align:left;
}
/*
@tab Page
@section Heading 3
@style heading 3
/
h3{
/@editable*/color:#330066;
/*@editable*/font-family:'visuelt medium', helvetica, arial, sans-serif;
/*@editable*/font-size:18px;
/*@editable*/font-style:normal;
/*@editable*/line-height:125%;
/*@editable*/letter-spacing:normal;
/*@editable*/text-align:left;
}
/*
@tab Page
@section Heading 4
@style heading 4
/
h4{
/@editable*/color:#454D54;
/*@editable*/font-family:'visuelt medium', helvetica, arial, sans-serif;
/*@editable*/font-size:18px;
/*@editable*/font-weight:500;
/*@editable*/font-style:normal;
/*@editable*/line-height:125%;
/*@editable*/letter-spacing:normal;
/*@editable*/text-align:left;
}

h5{ 
/*@editable*/color:#000000;
/*@editable*/font-family:'visuelt medium', helvetica, arial, sans-serif;
/*@editable*/font-size:14px;
/*@editable*/font-style:normal;
/*@editable*/font-weight:500;
/*@editable*/line-height:150%;
/*@editable*/letter-spacing:normal;
/*@editable*/text-align:left;
}

h6 {
color: #2B065e;
font-family: 'visuelt medium', helvetica, arial, sans-serif; 
font-size: 18px; 
line-height: 30px;
font-weight:500;
}

p {
/*@editable*/color:#454D54;
/*@editable*/font-family:'visuelt', helvetica, arial, sans-serif;
/*@editable*/font-size:16px;
/*@editable*/font-style:normal;
/*@editable*/font-weight:normal;
/*@editable*/line-height:150%;
/*@editable*/letter-spacing:normal;
/*@editable*/text-align:left;
}

img {
border: 0 !important;
outline: none !important;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}

a:hover {
opacity: 0.6;
filter: alpha(opacity=60);
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;

/* for IE8 and earlier /
}
/ What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}

/* What it does: Centers email on Android 4.4 /
div[style="margin: 16px 0"] {
margin:0 !important;
}

/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}

/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}

/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}

/* What it does: A work-around for iOS meddling in triggered links. */
*[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
}

/* What it does: A work-around for Gmail meddling in triggered links. */
.x-gmail-data-detectors,
.x-gmail-data-detectors *,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
}

/* What it does: Prevents Gmail from displaying a download button on large, non-linked images. /
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/ If the above doesn't work, add a .g-img class to any image in question. */
img.g-img + div {
display:none !important;
}

/* What it does: Prevents underlining the button text in Windows 10 */
.button-link {
text-decoration: none !important;
}

.dt-show {
display:block !important;

}

.mob-hide {
display:none !important;
display: none; 
font-size: 0; 
max-height: 0; 
line-height: 0;
mso-hide:all;
}

/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 /
/ Create one of these media queries for each additional viewport size you'd like to fix /
/ Thanks to Eric Lepetit (@ericlepetitsf) for help troubleshooting */
@media screen and (max-device-width:600px), screen and (max-width:600px) {
.email-container {
min-width: 375px !important;
}

</style>
<!-- Progressive Enhancements -->
<style>

a { font-family: 'visuelt-medium' }
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all .5s ease-in-out;
}
.button-td:hover,
.button-a:hover {
background: #211651 !important;
border-color: #211651 !important;
}

/* Media Queries */
@media screen and (max-width: 600px) {

.email-container {
width: 100% !important;
margin: auto !important;
}

img {
width: 100%;
}

#logo {
width: 50%;
}

#logo-made-with-love {
width: 80%;
text-align: center !important;
}

.social {
width: 23px;
height: 23px;
}
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid {
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}

/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}

.stack-column-center table {
width: 90%;
}

.half-column-center {
display: inline-block !important;
width: 50% !important;
max-width: 50% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}

/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}

/* What it does: Adjust typography on small screens to improve readability */
.email-container p {
font-size: 17px !important;
line-height: 25px !important;
}

.dt-show {
display:none !important;
font-size: 0; 
max-height: 0; 
line-height: 0;
mso-hide:all;

}

.mob-hide {
display:block !important;

}

h1{
padding-top:120px !important;
font-size:30px;

}

h2 {
text-align:center;
}

h4 {
text-align:center !important;
}

p {

/*@editable*/text-align:center;
}

.a-social {
font-size:10px !important;
}

}

</style>
<!-- What it does: Makes background images in 72ppi Outlook render at correct size. -->

<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96/o:PixelsPerInch
/o:OfficeDocumentSettings
</xml>
<![endif]-->
<body>
<center style="width: 100%; text-align: left;">

<!-- Visually Hidden Preheader Text : BEGIN -->
<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: 'visuelt', helvetica, arial, sans-serif;">Preheader Copy Goes Here</div>
<!-- Visually Hidden Preheader Text : END -->

<!-- Email Header : BEGIN 
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto; width: 600px;" class="email-container">
<tr>
<td style="padding: 20px 0; text-align: center;"><a href="http://babylonhealth.com/" target="_blank" style="text-decoration: none;"><img id="logo" src="https://cdn.braze.eu/appboy/communication/assets/image_assets/images/5e28204ea995e71ae7d6c037/original.gif?1579688014" border="0" alt="alt_text" width="200" height="50" style="height: auto; font-family: 'visuelt', helvetica, arial, sans-serif; font-size: 12px; line-height: 18px; color: #555555;"/></a></td>
</tr>
</table>
Email Header : END -->

<!-- Email Body : BEGIN -->
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto; width: 600px;" class="email-container">

<!-- Hero Image DT, Flush : BEGIN -->
<tr>
<td bgcolor="#ffffff" class="dt-show">
<a href="https://www.gpathand.nhs.uk/" target="_blank">
<img class="fluid" src="https://cdn.braze.eu/appboy/communication/assets/image_assets/images/5e6a68ad36dc780f375d3315/original.jpg?1584031917" border="0" alt="" title="" width="600" style="width: 100%; display: block;" alt="Bupa & Babylon Health"/>
</a>
</td>

</tr>
<!-- Hero Image DT, Flush : END -->

<!-- Hero Image Mob, Flush : BEGIN -->
<tr>
<td bgcolor="#ffffff" class="mob-hide">
<a href="https://www.gpathand.nhs.uk/" target="_blank">
<img class="fluid" src="https://cdn.braze.eu/appboy/communication/assets/image_assets/images/5e6a68adb0c2be10f3e1daa5/original.jpg?1584031917" border="0" alt="" title="" width="600" style="width: 100%; display: block;" alt="Bupa & Babylon Health"/>
</a>
</td>

</tr>
<!-- Hero Image Mob, Flush : END -->

<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td bgcolor="#ffffff" style="padding: 0px 30px 10px;">
<h1>Hello Digital GP in partnership with Babylon</h1>

</td>
</tr>
<!-- 1 Column Text + Button : END -->

<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td bgcolor="#ffffff" style="padding: 0 50px 20px; font-family: 'visuelt', helvetica, arial, sans-serif; font-size: 18px; line-height: 30px; color: #454D54; text-align: left;">
<p><strong>Hi [name],</strong><p>
<p style="text-align;left;margin: 0;">Thanks for joining Digital GP. You now have 24/7‌ access to GPs, instant health information and all of the tools you need to manage your health in one place.</p>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" style="background-color:#ffffff; padding: 0 30px 40px; font-family: 'visuelt', helvetica, arial, sans-serif; font-size: 11px; line-height: 20px; color: #ffffff;">
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto;">
<tr>
<td>
<div align="center">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.gpathand.nhs.uk/" style="height:40px;v-text-anchor:middle;width:238px;" arcsize="25%" strokecolor="#400099" fillcolor="#400099">
<w:anchorlock/>
<center style="color:#ffffff;font-family:'visuelt', helvetica, arial, sans-serif;font-size:15px;font-weight:bold;">Visit the app</center>
</v:roundrect>
<![endif]-->
<a href="https://www.gpathand.nhs.uk/" target="_blank" style="background-color:#400099;border:1px solid #400099;border-radius:10px;color:#ffffff;display:inline-block;font-family:'visuelt', helvetica, arial, sans-serif;font-size:15px;font-weight:bold;line-height:38px;text-align:center;text-decoration:none;width:250px;-webkit-text-size-adjust:none;mso-hide:all;">Visit the app</a>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text + Button : END -->

<!-- Two Columns : BEGIN -->
<tr>
<td bgcolor="#ece5f5" align="center" valign="bottom">
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>

<!-- 1 Column : BEGIN -->
<td width="50%" class="stack-column-center">
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding-top: 10px; text-align: center;vertical-align: bottom !important;">

<a href="https://www.gpathand.nhs.uk/" target="_blank"><img src="https://cdn.braze.eu/appboy/communication/assets/image_assets/images/5e6a6be83f0da27791dd8d08/original.gif?1584032744" aria-hidden="true" width="300" height="300" alt="video appointment with one of our doctors" title="video appointment with one of our doctors" border="0" class="fluid" style="height: auto; font-family: 'visuelt', helvetica, arial, sans-serif; font-size: 15px; line-height: 20px; color: #555555;"></a>
</td>
</tr>

</table>
</td>
<!-- 1 Column : END -->

<!-- 2 Column : BEGIN -->
<td width="50%" class="stack-column-center">
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="font-family: 'visuelt', helvetica, arial, sans-serif; font-size: 16px; line-height: 28px; color: #201a51; padding:20px 40px; text-align: left;" class="center-on-narrow">
<p style="color:#2B065e;"><strong>Unlimited 24/7‌ GP appointments</strong><br><br>
Talk to a UK-based doctor at any time of the day or night, directly from your mobile. Book online or via the app and get an appointment, normally within two hours.</p></td>
</tr>

<tr>
<td align="center" valign="top" style="padding-bottom:50px;">
<div align="center"><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.gpathand.nhs.uk/" style="height:40px;v-text-anchor:middle;width:238px;" arcsize="25%" strokecolor="#400099" fillcolor="#400099">
<w:anchorlock/>
<center style="color:#ffffff;font-family:'visuelt', helvetica, arial, sans-serif;font-size:15px;font-weight:bold;">Book appointment</center>
</v:roundrect>
<![endif]-->
<a href="https://www.gpathand.nhs.uk/" target="_blank"style="background-color:#400099;border:1px solid #400099;border-radius:10px;color:#ffffff;display:inline-block;font-family:'visuelt', helvetica, arial, sans-serif;font-size:15px;font-weight:bold;line-height:38px;text-align:center;text-decoration:none;width:90%;-webkit-text-size-adjust:none;mso-hide:all;">Book appointment</a>
</div>
</td>
</tr>
</table>
</td>
<!-- 2 Column : END -->

</tr>
</table>
</td>
</tr>
<!-- Two Columns : END -->

<!-- Spacer : BEGIN
<tr>
<td bgcolor="#ffffff" style="padding: 30px 50px 0; font-family: 'visuelt', helvetica, arial, sans-serif; font-size: 18px; line-height: 30px;text-align: center; font-weight: 300;">

</td>
</tr>

END -->

<!-- Two Columns RTL : BEGIN -->
<tr>
<td bgcolor="#d9cceb" align="center" valign="bottom" style="direction:rtl;margin-top:50px;">
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>

<!-- 1 Column : BEGIN -->
<td width="50%" class="stack-column-center">
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding-top: 10px;"><!-- text-align: center;background-image: url('https://cdn.braze.eu/appboy/communication/assets/image_assets/images/5e594bb943c19d2547cf90ae/original.gif?1582910393'); background-repeat:no-repeat;background-size: 100%; -->

<a href="https://www.gpathand.nhs.uk/" target="_blank"><img src="https://cdn.braze.eu/appboy/communication/assets/image_assets/images/5e594bb943c19d2547cf90ae/original.gif?1582910393" aria-hidden="true" width="300" height="300" alt="Symptom Checker" title="Symptom Checker" border="0" class="fluid" style="height: auto; font-family: 'visuelt', helvetica, arial, sans-serif; font-size: 15px; line-height: 20px; color: #555555;"></a>
</td>
</tr>

</table>
</td>
<!-- 1 Column : END -->

<!-- 2 Column : BEGIN -->
<td width="50%" class="stack-column-center">
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="direction:ltr;font-family: 'visuelt', helvetica, arial, sans-serif; font-size: 16px; line-height: 28px; color: #201a51; padding:20px 40px; text-align: left;" class="center-on-narrow">
<p style="color:#2B065e;"><strong>Check your symptoms</strong>Powered by world-leading AI, Symptom Checker asks you questions about your condition and gives you the most appropriate health information based on known risk factors.</p></td>
</tr>

<tr>
<td align="center" valign="top" style="padding-bottom:50px;">
<div align="center"><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.gpathand.nhs.uk/" style="height:40px;v-text-anchor:middle;width:238px;" arcsize="25%" strokecolor="#400099" fillcolor="#400099">
<w:anchorlock/>
<center style="color:#ffffff;font-family:'visuelt', helvetica, arial, sans-serif;font-size:15px;font-weight:bold;">Book appointment</center>
</v:roundrect>
<![endif]-->
<a href="https://www.gpathand.nhs.uk/" target="_blank"style="background-color:#400099;border:1px solid #400099;border-radius:10px;color:#ffffff;display:inline-block;font-family:'visuelt', helvetica, arial, sans-serif;font-size:15px;font-weight:bold;line-height:38px;text-align:center;text-decoration:none;width:90%;-webkit-text-size-adjust:none;mso-hide:all;">Check symptoms</a>
</div>
</td>
</tr>
</table>
</td>
<!-- 2 Column : END -->

</tr>
</table>
</td>
</tr>
<!-- Two Column RTL : END -->

<!-- Two Columns RTL new test : BEGIN -->
<tr>
<td bgcolor="#d9cceb" align="center" valign="bottom" style="direction:rtl;margin-top:50px;">
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>

<!-- 1 Column : BEGIN -->
<td width="50%" class="stack-column-center" height="380" style="background-image: url('https://cdn.braze.eu/appboy/communication/assets/image_assets/images/5e594bb943c19d2547cf90ae/original.gif?1582910393'); background-repeat:no-repeat;background-size: cover;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:300px;height:270px;">
<v:fill type="tile" src="https://cdn.braze.eu/appboy/communication/assets/image_assets/images/5e594bb943c19d2547cf90ae/original.gif?1582910393" color="#7bceeb" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

</td>
<!-- 1 Column : END -->

<!-- 2 Column : BEGIN -->
<td width="50%" class="stack-column-center">
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="direction:ltr;padding:20px 40px 20px 50px;" class="center-on-narrow">
<p style="color:#2B065e;"><strong>Check your symptoms</strong><br><br>Powered by world-leading AI, Symptom Checker asks you questions about your condition and gives you the most appropriate health information based on known risk factors.</p></td>
</tr>

<tr>
<td align="center" valign="top" style="padding-bottom:50px;">
<div align="center"><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.gpathand.nhs.uk/" style="height:40px;v-text-anchor:middle;width:238px;" arcsize="25%" strokecolor="#400099" fillcolor="#400099">
<w:anchorlock/>
<center style="color:#ffffff;font-family:'visuelt', helvetica, arial, sans-serif;font-size:15px;font-weight:bold;">Book appointment</center>
</v:roundrect>
<![endif]-->
<a href="https://www.gpathand.nhs.uk/" target="_blank"style="background-color:#400099;border:1px solid #400099;border-radius:10px;color:#ffffff;display:inline-block;font-family:'visuelt', helvetica, arial, sans-serif;font-size:15px;font-weight:bold;line-height:38px;text-align:center;text-decoration:none;width:90%;-webkit-text-size-adjust:none;mso-hide:all;">Check symptoms</a>
</div>
</td>
</tr>
</table>
</td>
<!-- 2 Column : END -->

</tr>
</table>
</td>
</tr>
<!-- Two Column RTL new test : END -->

<!-- Two Columns : BEGIN -->
<tr>
<td bgcolor="#400099" align="center" valign="bottom">
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>

<!-- 1 Column : BEGIN -->
<td width="50%" class="stack-column-center">
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding-top: 10px; text-align: center;">

<img src="https://cdn.braze.eu/appboy/communication/assets/image_assets/images/5e6a68ada995e7799c18035f/original.png?1584031917" aria-hidden="true" width="300" height="300" alt="" title="how to book an appointment" border="0" class="fluid" style="height: auto; font-family: 'visuelt', helvetica, arial, sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
</td>
</tr>

</table>
</td>
<!-- 1 Column : END -->

<!-- 2 Column : BEGIN -->
<td width="50%" class="stack-column-center">
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 0px 20px 50px;" class="center-on-narrow"><h2 style="color:#ffffff;">For more information on how to book an appointment, watch our <a href="https://www.babylonhealth.com/business/bupa/digital-gp" target="_blank" style="text-decoration: underline;color:#ffffff;font-family:'visuelt-medium', helvetica, arial, sans-serif !important;font-weight:500;">step-by-step video.</a></h2>
</td>
</tr>
</table>
</td>
<!-- 2 Column : END -->

</tr>
</table>
</td>
</tr>
<!-- Two Columns : END -->

<!-- Four Even Columns : BEGIN -->
<tr>
<td align="center" valign="center" style="vertical-align: center;">
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="100%">

<tr>
<!-- 1 Column : BEGIN -->
<td width="25%" class="half-column-center" style="height:310px;vertical-align: top;background-color: #e5dff1;">
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="text-align: center;">
<a href="#" target="_blank" style="margin: 0; text-decoration: none; color: #211651;">
<img src="https://cdn.braze.eu/appboy/communication/assets/image_assets/images/5e6a68ad9ae1686fd6f2e454/original.png?1584031917" aria-hidden="true" width="150" height="150" alt="#" title="#" border="0" class="fluid" style="height: auto; background: #e5dff1; font-family: 'visuelt', helvetica, arial, sans-serif; font-size: 15px; line-height: 20px; color: #555555;"></a>
</td>
</tr>
<tr>
<td style="padding: 0 10px 10px; text-align: center;vertical-align: top;" class="center-on-narrow"><h4 style="font-family: 'visuelt medium', helvetica, arial, sans-serif; font-size: 15px; line-height: 20px; text-align: center;">Prescriptions sent to your chosen pharmacy or delivered to your door</h4></td>
</tr>
</table>
</td>
<!-- 1 Column : END -->
<!-- 2 Column : BEGIN -->
<td width="25%" class="half-column-center" style="height:310px;vertical-align: top;background-color: #eae7f4;">
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="text-align: center;">
<a href="#" target="_blank" style="margin: 0; text-decoration: none; color: #211651;">
<img src="https://cdn.braze.eu/appboy/communication/assets/image_assets/images/5e6a68ad43c19d5e3a1d2e8d/original.png?1584031917" aria-hidden="true" width="150" height="150" alt="#" title="#" border="0" class="fluid" style="height: auto;font-family: 'visuelt', helvetica, arial, sans-serif; font-size: 15px; line-height: 20px; color: #555555;"></a>
</td>
</tr>
<tr>
<td style="padding: 0 10px 10px; text-align: center;vertical-align: top;" class="center-on-narrow"><h4 style="font-family: 'visuelt medium', helvetica, arial, sans-serif; font-size: 15px; line-height: 20px; text-align: center;">Referrals to specialists</h4></td>
</tr>
</table>
</td>
<!-- 2 Column : END -->

<!-- 3 Column : BEGIN -->
<td width="25%" class="half-column-center" style="height:310px;vertical-align: top;background-color: #f0eef7;">
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="text-align: center;">
<a href="#" target="_blank" style="margin: 0; text-decoration: none; color: #211651;">
<img src="https://cdn.braze.eu/appboy/communication/assets/image_assets/images/5e6a68ada995e7416217fd09/original.png?1584031917" aria-hidden="true" width="150" height="150" alt="#" title="#" border="0" class="fluid" style="height: auto; background-color: #f0eef7; font-family: 'visuelt', helvetica, arial, sans-serif; font-size: 15px; line-height: 20px; color: #555555;"></a>
</td>
</tr>
<tr>
<td style="padding: 0 10px 10px; text-align: center;vertical-align: top;" class="center-on-narrow"><h4 style="font-family: 'visuelt medium', helvetica, arial, sans-serif; font-size: 15px; line-height: 20px; text-align: center;">Free health information wherever you are in the world</h4></td>
</tr>
</table>
</td>
<!-- 3 Column : END -->

<!-- 4 Column : BEGIN -->
<td width="25%" class="half-column-center" style="height:310px;vertical-align: top;background-color: #d9cceb;">
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="text-align: center;">
<a href="#" target="_blank" style="margin: 0; text-decoration: none; color: #211651;">
<img src="https://cdn.braze.eu/appboy/communication/assets/image_assets/images/5e6a68ad3f0da27791dd8c98/original.png?1584031917" aria-hidden="true" width="150" height="150" alt="#" title="#" border="0" class="fluid" style="height: auto; background-color: #d9cceb; font-family: 'visuelt', helvetica, arial, sans-serif; font-size: 15px; line-height: 20px; color: #555555;"></a>
</td>
</tr>
<tr>
<td style="padding: 0 10px 10px; text-align: center;vertical-align: top;" class="center-on-narrow"><h4 style="font-family: 'visuelt medium', helvetica, arial, sans-serif; font-size: 15px; line-height: 20px; text-align: center;">Instant access to your clinical records</h4></td>
</tr>
</table>
</td>
<!-- 4 Column : END -->

</tr>
</table>
</td>
</tr>
<!-- Four Even Columns : END -->

<!-- Four Even Columns : BEGIN -->
<tr>
<td align="center" valign="center" style="vertical-align: center;background-color: #ffffff;">
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="100%">

<tr>
<!-- 1 Column : BEGIN -->
<td width="50%" class="stack-column-center" style="vertical-align: top;">
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="100%">

<tr>
<td style="background-color: #ffffff;padding:30px; text-align: left;vertical-align: top;" class="center-on-narrow"><h6>Best of health,<br>The Babylon Team</h6></td>
</tr>
</table>
</td>
<!-- 1 Column : END -->

<!-- 3 Column : BEGIN -->
<td width="50%" class="stack-column-center" style="text-align: right;vertical-align: middle;background-color: #ffffff;">
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="100%">

<tr>
<td style="padding: 20px; text-align: right;vertical-align: middle;" class="center-on-narrow"><a href="http://babylonhealth.com/" target="_blank" style="text-decoration: none;"><img id="logo-made-with-love" src="https://cdn.braze.eu/appboy/communication/assets/image_assets/images/5e28445d3f0da204523d2840/original.png?1579697245" width="140" height="auto" alt="made with love" style="display:inline-block; height: auto;"></a></td>
</tr>
</table>
</td>
<!-- 3 Column : END -->

</tr>
</table>
</td>
</tr>
<!-- Four Even Columns : END -->

<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td align="center">
<table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" style=" word-wrap: break-word;width:100%; background-color: #ffffff;"> 
<tr>
<td bgcolor="#cecece" style="background-color: rgba(0,0,0,0.5); height: 1px; font-size: 1px; line-height: 1px;"> </td>
</tr>

<tr>
<td align="left" style="padding: 10px 30px;">
<h5>Download the free Babylon app.</h5> 
<a href="https://apps.apple.com/gb/app/babylon-health-doctor-consultations/id858558101" style="font-weight:500;color: #000000; text-decoration: none;font-size: 14px; line-height: 150%; font-family:'visuelt medium', helvetica, arial, sans-serif;">App Store</a>  |  <a href="https://play.google.com/store/apps/details?id=com.babylon&hl=en_GB" style="font-weight:500;color: #000000; text-decoration: none;font-size: 14px; line-height: 150%; font-family:'visuelt medium', helvetica, arial, sans-serif;">Google Play</a>
</td>
</tr>
<tr>
<td align="left" style="padding: 10px 30px;">
<a class="a-social" href="https://www.facebook.com/babylonhealth" style="font-weight:500;color: #000000; text-decoration: none;font-size: 11px; line-height: 28px; font-family:'visuelt medium', helvetica, arial, sans-serif;" target="_blank">Facebook</a>
  |  
<a class="a-social" href="https://twitter.com/babylonhealth/" style="font-weight:500;color: #000000; text-decoration: none;font-size: 11px; line-height: 28px; font-family:'visuelt medium', helvetica, arial, sans-serif;" target="_blank">Twitter</a>
  |  
<a class="a-social" href="https://www.linkedin.com/company/babylonhealth/" style="font-weight:500;color: #000000; text-decoration: none;font-size: 11px; line-height: 28px; font-family:'visuelt medium', helvetica, arial, sans-serif;" target="_blank">Linkedin</a>
  |  
<a class="a-social" href="https://www.instagram.com/babylonhealth/" style="font-weight:500;color: #000000; text-decoration: none;font-size: 11px; line-height: 28px; font-family:'visuelt medium', helvetica, arial, sans-serif;" target="_blank">Instagram</a>
  |  
<a class="a-social" href="https://www.youtube.com/channel/UCPEAYzwc7QJg4DL5x6U3AEQ" style="font-weight:500;color: #000000; text-decoration: none;font-size: 11px; line-height: 28px; font-family:'visuelt medium', helvetica, arial, sans-serif;" target="_blank">YouTube</a>
</td>
</tr>
<tr>
<td align="left" style="padding: 20px 30px;">
<a href="https://www.google.com/maps/place/Babylon+Health/@51.491877,-0.1753525,15z/data=!4m5!3m4!1s0x0:0x825dc0da5f6671c7!8m2!3d51.493015!4d-0.167214" style="color: #54606A;font-family: 'visuelt medium', helvetica, arial, sans-serif; text-decoration: none;font-size: 11px; line-height: 20px;">Babylon Health Ltd, 60 Sloane Avenue, London SW3 3DD</a><br> <a href="tel:+443302231008" style="color: #54606A;font-family: 'visuelt medium', helvetica, arial, sans-serif; text-decoration: none;font-size: 11px; line-height: 20px;">+44 33 0223 1008</a> | <a href="mailto:support@babylonhealth.com" style="font-family: 'visuelt medium', helvetica, arial, sans-serif;color: #54606A; text-decoration: none;font-size: 11px; line-height: 20px; ">support@babylonhealth.com</a> <br><a href="%%unsubscribe%%" style="font-family: 'visuelt medium', helvetica, arial, sans-serif;color: #54606A; text-decoration: none;font-size: 11px; line-height: 20px; ">Unsubscribe from Babylon updates here</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text + Button : END -->

</table>
<!-- Email Body : END -->

<!-- Full Bleed Footer Section : END -->
</center>
</body>
</html>
Replied to Discussion: How many of you are making ALL text and content in your emails into clickable links? by Niven Ranchhod 2020-03-16 09:14:13
Agreed, making everything a link is a horrible experience.
Working at a bank with many proponents for accessible emails, including myself as the builder, we ensure any sections with a leading image are linked to the same place as the button..
I personally hate when associated images aren't linked, so this scratches my own itch.
The user then has two links - the section image and the button.
The text is descriptive of what they'll find by clicking the button.
Niven Ranchhod

Sign in to Community

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Forgot password
