Skip to content

Instantly share code, notes, and snippets.

@futurefabric

futurefabric/govdelivery_template.html

Last active August 29, 2015 14:10
Show Gist options
  • Save futurefabric/a9c9ab3996aaeacac6cc to your computer and use it in GitHub Desktop.
Save futurefabric/a9c9ab3996aaeacac6cc to your computer and use it in GitHub Desktop.
Download ZIP
Email templates — Product Gaps
Raw
govdelivery_template.html
<p><a href="https://www.gov.uk"><img src="http://stage-content.govdelivery.com/attachments/fancy_images/UKGOVUK/2014/12/20064/govuk-logotype_original.gif" alt="GOV.UK" title="GOV.UK" width="160" height="26" style="border: none; outline: none;" /></a></p>
<table id="content" style="max-width: 580px; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tr>
<td style="border-collapse: collapse; padding: 0">
<h1 style="color: #0B0C0C !important; font-family: sans-serif; font-weight: 700; font-size: 36px; line-height: 1.111111111; margin: 15px 0; padding: 15px 0;">Title here</h1>
<p style="color: #0B0C0C; font-family: sans-serif; font-size: 19px; line-height: 1.315789474; margin: 15px 0;">
The websites of all government departments and many other agencies and public bodies are being merged into GOV.UK.
</p>
<h2 style="color: #0B0C0C !important; font-family: sans-serif; font-weight: 700; font-size: 24px; line-height: 1.111111111; margin: 15px 0; padding: 15px 0;">Secondary title here</h2>
<p style="color: #0B0C0C; font-family: sans-serif; font-size: 19px; line-height: 1.315789474; margin: 15px 0;">
Here you can see all policies, announcements, publications, statistics and consultations.
</p>
</td>
</tr>
</table>
<table id="content" style="max-width: 580px; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-top: 1px solid #cccccc;">
<tr>
<td style="border-collapse: collapse; padding: 0; margin-top: 40px; padding-top:20px;">
<p style="font-family: arial, helvetica, sans-serif;"><a href="[[TOPIC_UNSUBSCRIBE_URL]]" title="Unsubscribe" style="font-family: Helvetica, Arial, sans-serif; font-size: 15px; margin-bottom: 1em;">Manage your GOV.UK email preferences<br />Unsubscribe from this alert only</a> <font face="Helvetica, Arial, sans-serif"><span style="font-size: 15px; margin-bottom: 1em;">or</span></font> <a href="[[ONECLICK_UNSUB_URL]]" title="Unsubscribe" style="font-family: Helvetica, Arial, sans-serif; font-size: 15px; margin-bottom: 1em;">unsubscribe completely from GOV.UK alerts</a></p>
<p style="font-family: Helvetica, Arial, sans-serif; font-size: 15px;">Provided by <a href="https://www.gov.uk" target="_blank" title="GOV.UK">GOV.UK</a>.<br /><a href="https://www.gov.uk/feedback/contact" style="font-size: 15px;">Contact us</a> to ask questions or report problems.</p>
</td>
</tr>
</table>
Raw
template.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Email template</title>
<style type="text/css">
/* Based on The MailChimp Reset INLINE: Yes. */
/* Client-specific Styles */
#outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes.*/
.ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
/* Forces Hotmail to display normal line spacing. More on that: http://www.emailonacid.com/forum/viewthread/43/ */
/* End reset */
#masthead,
#content,
#footer {
max-width: 580px;
}
#header {
width: 100%;
background-color: #0B0C0C;
}
td {
padding:0 0 0 15px;
}
#masthead tr td {
padding:0;
}
.wrapper {
max-width: 600px;
padding: 0 15px;
}
table.separator {
width: 100%;
height: 1px;
line-height:1px;
font-size:1px;
}
table.separator td {
background:none;
border-top:solid 1px #bfc1c3;
border-width:1px 0 0 0;
height:1px;
line-height:1px;
font-size:1px;
width:100%;
margin:20px 0px 0px 0px;
padding-bottom:20px;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, small {
color: #0B0C0C;
font-family: sans-serif;
margin: 15px 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
}
p, ul, ol, h3, h4, h5, h6 {
font-size: 19px;
line-height: 1.315789474;
}
.issue {
color: #6f777b;
margin-bottom:30px;
}
h1 {
font-size: 36px;
line-height: 1.111111111;
padding: 15px 0;
}
h2, .lead {
font-size: 24px;
line-height: 1.25;
padding-top: 30px;
}
hr {
border:none;
}
small, .actions, .unsubscribe {
font-size: 16px;
line-height: 1.25;
}
.actions, .unsubscribe, .actions a, .unsubscribe a {
color: #6F777B !important;
}
ol.actions, ul.actions {
padding: 0;
margin:40px 0 30px 0;
}
.actions li {
list-style-type: none;
margin:0 0 10px 0;
padding:0;
}
/* Some sensible defaults for images
Bring inline: Yes. */
img {outline:none; text-decoration:none; display:block; -ms-interpolation-mode: bicubic;}
a img {border:none;}
.image_fix {display:block;}
/* Yahoo paragraph fix
Bring inline: Yes. */
p {margin: 15px 0;}
/* Hotmail header color reset
Bring inline: Yes. */
h1, h2, h3, h4, h5, h6 {color: #0B0C0C !important;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .actions li a {color: #005EA5 !important;}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, .actions li a:hover {
color: #2E8ACA !important; /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
}
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active, .actions li a:active {
color: #2E8ACA !important; /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
}
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited, .actions li a:visited {
color: #005EA5 !important; /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
}
/* Outlook 07, 10 Padding issue fix
Bring inline: No.*/
table td {border-collapse: collapse;}
/* Remove spacing around Outlook 07, 10 tables
Bring inline: Yes */
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
/* Styling your links has become much simpler with the new Yahoo. In fact, it falls in line with the main credo of styling in email and make sure to bring your styles inline. Your link colors will be uniform across clients when brought inline.
Bring inline: Yes. */
a {color: #005EA5;}
/***************************************************
****************************************************
MOBILE TARGETING
****************************************************
***************************************************/
@media only screen and (max-device-width: 480px) {
/* Part one of controlling phone number linking for mobile. */
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: blue; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: orange !important;
pointer-events: auto;
cursor: default;
}
}
/* More Specific Targeting */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* You guessed it, ipad (tablets, smaller screens, etc) */
/* repeating for the ipad */
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: blue; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: orange !important;
pointer-events: auto;
cursor: default;
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
/* Put your iPhone 4g styles in here */
}
/* Android targeting */
@media only screen and (-webkit-device-pixel-ratio:.75){
/* Put CSS for low density (ldpi) Android layouts in here */
}
@media only screen and (-webkit-device-pixel-ratio:1){
/* Put CSS for medium density (mdpi) Android layouts in here */
}
@media only screen and (-webkit-device-pixel-ratio:1.5){
/* Put CSS for high density (hdpi) Android layouts in here */
}
/* end Android targeting */
</style>
<!--[if IEMobile 7]>
<style type="text/css">
</style>
<![endif]-->
<!--[if gte mso 9]>
<style>
/* Target Outlook 2007 and 2010 */
</style>
<![endif]-->
</head>
<body>
<table id="header">
<tr>
<td>
<table id="masthead">
<tr>
<td>
<img src="https://dl.dropboxusercontent.com/u/1312500/gov.uk/email-template/govuk_logotype_email.gif" alt="GOV.UK" />
</td>
</tr>
</table>
</td>
</tr>
</table>
<table id="content">
<tr>
<td>
<h1>Alerts and recalls for drugs and medical devices</h1>
<p>The following alert has been published:</p>
<p><strong>Class 3 Drug Alert (Action within 5 days): GlaxoSmithKline / Parallel Distributors - Avandia 4mg, Avandia 8mg, Avandamet 1mg/500mg, Avandamet 2mg/500mg, Avandamet 2mg/1000mg, Avandamet 4mg/1000mg - EL(10)A/22</strong></p>
<p><a href="https://www.preview.alphagov.co.uk/drug-device-alerts/class-3-drug-alert-action-within-5-days-glaxosmithkline-parallel-distributors-avandia-4mg-avandia-8mg-avandamet-1mg-500mg-avandamet-2mg-500mg-avandamet-2mg-1000mg-avandamet-4mg-1000mg-el-10-a-22">https://www.preview.alphagov.co.uk/drug-device-alerts/class-3-drug-alert-action-within-5-days-glaxosmithkline-parallel-distributors-avandia-4mg-avandia-8mg-avandamet-1mg-500mg-avandamet-2mg-500mg-avandamet-2mg-1000mg-avandamet-4mg-1000mg-el-10-a-22</a></p>
<p>Following the European Medicines Agency (EMA) recommendation on 23 September 2010 to suspend marketing authorisations for all products containing rosiglitazone across Europe, GlaxoSmithKline (GSK) announced that all presentations of Avandia and Avandamet would no longer be available after 21 October 2010.</p>
<p>All undispensed UK packs purchased through their approved suppliers, Alliance Healthcare and AAH Pharmaceuticals, are being recalled.</p>
<table class="separator">
<tr>
<td><!-- --></td>
</tr>
</table>
<p>Enquiries about the content of this email should be sent to: <a href="mailto:[email protected]">[email protected]</a>.</p>
</td>
</tr>
</table>
<table id="footer">
<tr>
<td>
<ul class="actions">
<li><a href="#">Unsubscribe from these emails</a></li>
<li><a href="#">Manage your GOV.UK email preferences</a></li>
<li><a href="#">Change your password or email address</a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>
Raw
template_inlined.html
<!-- Inliner Build Version 4380b7741bb759d6cb997545f3add21ad48f010b -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Email template</title>
<!--[if IEMobile 7]>
<style type="text/css">
</style>
<![endif]-->
<!--[if gte mso 9]>
<style>
/* Target Outlook 2007 and 2010 */
</style>
<![endif]-->
</head>
<body style="width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0;"><style type="text/css">
h1 a:hover {
color: #2E8ACA !important;
}
h2 a:hover {
color: #2E8ACA !important;
}
h3 a:hover {
color: #2E8ACA !important;
}
h4 a:hover {
color: #2E8ACA !important;
}
h5 a:hover {
color: #2E8ACA !important;
}
h6 a:hover {
color: #2E8ACA !important;
}
.actions li a:hover {
color: #2E8ACA !important;
}
h1 a:active {
color: #2E8ACA !important;
}
h2 a:active {
color: #2E8ACA !important;
}
h3 a:active {
color: #2E8ACA !important;
}
h4 a:active {
color: #2E8ACA !important;
}
h5 a:active {
color: #2E8ACA !important;
}
h6 a:active {
color: #2E8ACA !important;
}
.actions li a:active {
color: #2E8ACA !important;
}
h1 a:visited {
color: #005EA5 !important;
}
h2 a:visited {
color: #005EA5 !important;
}
h3 a:visited {
color: #005EA5 !important;
}
h4 a:visited {
color: #005EA5 !important;
}
h5 a:visited {
color: #005EA5 !important;
}
h6 a:visited {
color: #005EA5 !important;
}
.actions li a:visited {
color: #005EA5 !important;
}
@media only screen and (max-device-width: 480px) {
a[href^="tel"] {
text-decoration: none; color: blue; pointer-events: none; cursor: default;
}
a[href^="sms"] {
text-decoration: none; color: blue; pointer-events: none; cursor: default;
}
.mobile_link a[href^="tel"] {
text-decoration: default; color: orange !important; pointer-events: auto; cursor: default;
}
.mobile_link a[href^="sms"] {
text-decoration: default; color: orange !important; pointer-events: auto; cursor: default;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
a[href^="tel"] {
text-decoration: none; color: blue; pointer-events: none; cursor: default;
}
a[href^="sms"] {
text-decoration: none; color: blue; pointer-events: none; cursor: default;
}
.mobile_link a[href^="tel"] {
text-decoration: default; color: orange !important; pointer-events: auto; cursor: default;
}
.mobile_link a[href^="sms"] {
text-decoration: default; color: orange !important; pointer-events: auto; cursor: default;
}
}
</style>
<table id="header" style="width: 100%; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #0B0C0C;" bgcolor="#0B0C0C"><tr><td style="border-collapse: collapse; padding: 0 0 0 15px;">
<table id="masthead" style="max-width: 580px; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"><tr><td style="border-collapse: collapse; padding: 0;">
<img src="https://dl.dropboxusercontent.com/u/1312500/gov.uk/email-template/govuk_logotype_email.gif" alt="GOV.UK" style="outline: none; text-decoration: none; display: block; -ms-interpolation-mode: bicubic;" /></td>
</tr></table></td>
</tr></table>
<table id="content" style="max-width: 580px; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"><tr><td style="border-collapse: collapse; padding: 0 0 0 15px;">
<h1 style="color: #0B0C0C !important; font-family: sans-serif; font-weight: 700; font-size: 36px; line-height: 1.111111111; margin: 15px 0; padding: 15px 0;">Alerts and recalls for drugs and medical devices</h1>
<p style="color: #0B0C0C; font-family: sans-serif; font-size: 19px; line-height: 1.315789474; margin: 15px 0;">The following alert has been published:</p>
<p style="color: #0B0C0C; font-family: sans-serif; font-size: 19px; line-height: 1.315789474; margin: 15px 0;"><strong>Class 3 Drug Alert (Action within 5 days): GlaxoSmithKline / Parallel Distributors - Avandia 4mg, Avandia 8mg, Avandamet 1mg/500mg, Avandamet 2mg/500mg, Avandamet 2mg/1000mg, Avandamet 4mg/1000mg - EL(10)A/22</strong></p>
<p style="color: #0B0C0C; font-family: sans-serif; font-size: 19px; line-height: 1.315789474; margin: 15px 0;"><a href="https://www.preview.alphagov.co.uk/drug-device-alerts/class-3-drug-alert-action-within-5-days-glaxosmithkline-parallel-distributors-avandia-4mg-avandia-8mg-avandamet-1mg-500mg-avandamet-2mg-500mg-avandamet-2mg-1000mg-avandamet-4mg-1000mg-el-10-a-22" style="color: #005EA5;">https://www.preview.alphagov.co.uk/drug-device-alerts/class-3-drug-alert-action-within-5-days-glaxosmithkline-parallel-distributors-avandia-4mg-avandia-8mg-avandamet-1mg-500mg-avandamet-2mg-500mg-avandamet-2mg-1000mg-avandamet-4mg-1000mg-el-10-a-22</a></p>
<p style="color: #0B0C0C; font-family: sans-serif; font-size: 19px; line-height: 1.315789474; margin: 15px 0;">Following the European Medicines Agency (EMA) recommendation on 23 September 2010 to suspend marketing authorisations for all products containing rosiglitazone across Europe, GlaxoSmithKline (GSK) announced that all presentations of Avandia and Avandamet would no longer be available after 21 October 2010.</p>
<p style="color: #0B0C0C; font-family: sans-serif; font-size: 19px; line-height: 1.315789474; margin: 15px 0;">All undispensed UK packs purchased through their approved suppliers, Alliance Healthcare and AAH Pharmaceuticals, are being recalled.</p>
<table class="separator" style="width: 100%; height: 1px; line-height: 1px; font-size: 1px; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"><tr><td style="border-top-style: solid; border-top-color: #bfc1c3; height: 1px; line-height: 1px; font-size: 1px; width: 100%; border-collapse: collapse; background: none; margin: 20px 0px 0px; padding: 0 0 20px 15px; border-width: 1px 0 0;"><!-- --></td>
</tr></table><p style="color: #0B0C0C; font-family: sans-serif; font-size: 19px; line-height: 1.315789474; margin: 15px 0;">Enquiries about the content of this email should be sent to: <a href="mailto:[email protected]" style="color: #005EA5;">[email protected]</a>.</p>
</td>
</tr></table>
<table id="footer" style="max-width: 580px; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"><tr><td style="border-collapse: collapse; padding: 0 0 0 15px;">
<ul class="actions" style="color: #6F777B !important; font-family: sans-serif; font-size: 16px; line-height: 1.25; margin: 40px 0 30px; padding: 0;"><li style="margin: 0 0 10px; padding: 0; list-style: none;"><a href="#" style="color: #005EA5 !important;">Unsubscribe from these emails</a></li>
<li style="margin: 0 0 10px; padding: 0; list-style: none;"><a href="#" style="color: #005EA5 !important;">Manage your GOV.UK email preferences</a></li>
<li style="margin: 0 0 10px; padding: 0; list-style: none;"><a href="#" style="color: #005EA5 !important;">Change your password or email address</a></li>
</ul></td>
</tr></table></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment