Notification email
Example use cases
- Application service notifications
Code output
Open email template in new windowHTML markup
The body of the email has been divided into sections of code that can be altered or replicated according to the requirements.
Copy<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">
<style type="text/css">
html,body {
margin:0;
padding:0;
background:#f1f3f6;
font-family: 'Open Sans', Arial, sans-serif;
font-size:15px;
-webkit-text-size-adjust:100%;
}
@media (max-width:767px) {
.mail-wrapper {
width:480px !important;
}
.mail-header tbody,
.mail-header tr,
.mail-header td,
.mail-footer tbody,
.mail-footer tr,
.mail-footer td {
display:block;
}
.mail-header td.header-first {
text-align:center;
}
.mail-header td.header-second {
padding-top:0 !important;
text-align:center;
}
.mail-main-body {
padding: 0 20px 15px 20px !important;
font-size:14px;
}
.mail-button {
margin:0 auto;
}
.mail-alt-pad {
padding:0 15px !important;
}
.mail-footer td.footer-first {
padding:15px 0 0 !important;
width:100%;
}
.mail-footer td.footer-second {
padding:0 !important;
width:100%;
}
}
@media (max-width:544px) {
.mail-wrapper {
width:100% !important;
}
}
</style>
<!--[if !mso]><!-- -->
<link href="https://skyframework.pccwglobal.com/css/fonts.css" rel="stylesheet">
<!--<![endif]-->
</head>
<body style="padding:0;background:#f1f3f6;">
<table align="center" border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td align="center" valign="top">
<table class="mail-wrapper" align="center" border="0" cellspacing="0" cellpadding="0" style="width:630px;padding:15px;">
<tr>
<td>
<!--header-->
<table class="mail-header table-block" align="center" border="0" cellspacing="0" cellpadding="0" width="100%" style="background:#ffffff;border-top:1px solid $border-color;border-left:1px solid $border-color;border-right:1px solid $border-color;">
<tr>
<td align="left" class="header-first" style="padding:20px 30px 20px 20px">
<img src="https://skyframework.pccwglobal.com/img/pccwglobal_dark_r.png" width="234" height="40" style="width:234px;height:40px;">
</td>
<td class="header-second" align="right" style="padding:20px 30px">
<h2 style="color:#29548c;margin:0;padding:0;font-weight:300;font-size:24px;line-height:24px;">Service Portal<br><small style="font-size:14px;font-weight:700;">APPLICATION NOTIFICATION</small></h2>
</td>
</tr>
</table>
<!--body-->
<table class="mail-body table-block" align="center" border="0" cellspacing="0" cellpadding="0" width="100%" style="background:#ffffff;border-left:1px solid $border-color;border-right:1px solid $border-color;">
<!--top spacer-->
<tr>
<td style="padding:0 30px;">
<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td style="height:40px;border-top:1px solid $border-color;">
</td>
</tr>
</table>
</td>
</tr>
<!--text-block-->
<tr>
<td class="mail-main-body" style="color:#212121;padding:0 30px;">
<p style="padding:0;margin:0;text-align:center;"><strong>Username</strong>, the following service(s)</p>
</td>
</tr>
<!--spacer-->
<tr>
<td style="height:10px">
</td>
</tr>
<!--text-block-->
<tr>
<td class="mail-main-body" style="color:#212121;padding:0 30px;">
<h3 style="color:#29548c;padding:0;margin:0;text-align:center;"><strong>Service name<br>Service name 2</strong></h3>
</td>
</tr>
<!--spacer-->
<tr>
<td style="height:10px">
</td>
</tr>
<!--text-block-->
<tr>
<td class="mail-main-body" style="color:#212121;padding:0 30px;">
<p style="padding:0;margin:0;text-align:center;">will expire<br><strong style="color:#29548c;">on 24/012/2017 at 14:32 GMT</strong></p>
</td>
</tr>
<!--spacer-->
<tr>
<td style="height:20px">
</td>
</tr>
<!--text-block-->
<tr>
<td class="mail-main-body" style="color:#212121;padding:0 30px;">
<p style="padding:0;margin:0;text-align:center;"><small>For any assistance, please contact us at <a href="mailto:helpdesk@pccwglobal.com" target="_blank" style="color:#2d74d0;text-decoration:none;">helpdesk@pccwglobal.com</a>.</small></p>
</td>
</tr>
<!--spacer-->
<tr>
<td style="height:40px">
</td>
</tr>
</table>
<!--footer-->
<table class="mail-alt table-block" align="center" border="0" cellspacing="0" cellpadding="0" width="100%" style="background:#ffffff;border-left:1px solid $border-color;border-right:1px solid $border-color;">
<tr>
<td style="padding: 0 30px;">
<table align="center" border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td class="mail-alt-main" align="center" valign="middle" style="border-top:1px solid $border-color;border-bottom:1px solid $border-color;padding:15px 0">
<span style="font-size:13px;">© 2017 <b>PCCW Global</b>. <span style="display:inline-block;">All rights reserved.</span></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="mail-footer table-block" align="center" border="0" cellspacing="0" cellpadding="0" width="100%" style="background:#ffffff;border-bottom:1px solid $border-color;border-left:1px solid $border-color;border-right:1px solid $border-color;">
<tr>
<td align="center" width="50%" class="footer-first" style="padding:10px 20px">
<img src="https://skyframework.pccwglobal.com/img/hkt.png" width="170" height="50" style="width:170px;height:50px;">
</td>
<td class="footer-second" width="50%" align="center" style="padding:10px 20px">
<img src="https://skyframework.pccwglobal.com/img/pccw-member.png" width="200" height="50" style="width:200px;height:50px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>