Email Templates
For Frankie Alerts & Notifications
Example Templates
Thus far, email templates have been created one of 2 ways: content embedded in .cshtml file and content created via the controller.
The following are paths to an example of each:
- Franklin Street - Frankie\Frankie\Frankie.Presentation.Mvc\Areas\v2\Views\Mail\InvoiceEmail.html.cshtml
- Franklin Street - Frankie\Frankie\Frankie.Presentation.Mvc\Areas\v2\Views\Mail\AlertInlined.html.cshtml
Email Template Frame
The following syntax is for the general email template, including styles, header, and footer:
<!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" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<head>
<title>Franklin Street</title>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
@media only screen and (max-width:648px) {
.container {
width: 100% !important
}
}
@media only screen and (max-width:648px) {
.container--inner {
width: 100% !important;
padding: 4px 0 0 !important
}
}
@media only screen and (max-width:648px) {
.content-block {
padding: 0 0 12px !important
}
}
@media only screen and (max-width:648px) {
.header--content {
padding: 18px !important
}
}
@media only screen and (max-width:648px) {
h1 {
font-size: 24px !important;
line-height: 24px !important;
margin: 0 0 12px !important
}
}
@media only screen and (max-width:648px) {
h2 {
font-size: 22px !important;
line-height: 24px !important;
margin: 0 0 12px !important
}
}
@media only screen and (max-width:648px) {
h3 {
margin: 0 0 12px !important
}
}
@media only screen and (max-width:648px) {
.logo {
width: 150px !important;
height: 26px !important
}
}
@media only screen and (max-width:648px) {
.logo--content {
width: 150px !important;
height: 26px !important
}
}
@media only screen and (max-width:648px) {
.logo--image {
width: 150px !important;
height: 26px !important;
font-size: 18px !important
}
}
@media only screen and (max-width:648px) {
.main--content {
padding: 18px !important
}
}
@media only screen and (max-width:648px) {
.bar {
max-width: 28px !important;
min-width: 28px !important;
width: 28px !important
}
}
@media only screen and (max-width:648px) {
.bar--gap {
max-width: 5px !important;
min-width: 5px !important;
width: 5px !important
}
}
@media only screen and (max-width:648px) {
.bar--right {
max-width: none !important;
width: 100% !important
}
}
/*# sourceMappingURL=base-responsive.css.map */
</style>
<style type="text/css">
@media only screen and (max-width:648px) {
.alert {
padding: 12px !important
}
}
/*# sourceMappingURL=alert-responsive.css.map */
</style>
</head>
<body itemscope="itemscope" itemtype="http://schema.org/EmailMessage" style="font-size: 14px; margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; padding: 0; -webkit-text-size-adjust: none; background-color: #e9e9e9; -webkit-font-smoothing: antialiased; width: 100%; height: 100%; line-height: 24px;">
<table class="wrapper" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; background-color: #e9e9e9; width: 100%;">
<tr style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<td style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top;"></td>
<td class="container" width="600" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0 auto; display: block; max-width: 600px; clear: both;">
<div class="container--inner" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0 auto; max-width: 600px; display: block; padding: 24px;">
<table width="100%" cellpadding="0" cellspacing="0" class="topbar" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; border-top: 1px solid #d4d4d4; background-color: #fff; width: 100%; height: 5px;">
<tr style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<td width="5%" class="bar background-color--primary-color" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; vertical-align: top; background-color: #8c9b93; font-size: 5px; line-height: 5px;">
<table width="100%" cellpadding="0" cellspacing="0" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<tr style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<td style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; vertical-align: top; font-size: 5px; line-height: 5px;"> </td>
</tr>
</table>
</td>
<td width="1%" class="bar bar--gap background-color--white" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; vertical-align: top; background-color: #fff; font-size: 5px; line-height: 5px;">
<table width="100%" cellpadding="0" cellspacing="0" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<tr style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<td style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; vertical-align: top; font-size: 5px; line-height: 5px;"> </td>
</tr>
</table>
</td>
<td width="5%" class="bar background-color--quinary-color" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; vertical-align: top; background-color: #bc6d50; font-size: 5px; line-height: 5px;">
<table width="100%" cellpadding="0" cellspacing="0" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<tr style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<td style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; vertical-align: top; font-size: 5px; line-height: 5px;"> </td>
</tr>
</table>
</td>
<td width="1%" class="bar bar--gap background-color--white" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; vertical-align: top; background-color: #fff; font-size: 5px; line-height: 5px;">
<table width="100%" cellpadding="0" cellspacing="0" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<tr style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<td style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; vertical-align: top; font-size: 5px; line-height: 5px;"> </td>
</tr>
</table>
</td>
<td width="5%" class="bar background-color--senary-color" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; vertical-align: top; background-color: #818054; font-size: 5px; line-height: 5px;">
<table width="100%" cellpadding="0" cellspacing="0" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<tr style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<td style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; vertical-align: top; font-size: 5px; line-height: 5px;"> </td>
</tr>
</table>
</td>
<td width="1%" class="bar bar--gap background-color--white" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; vertical-align: top; background-color: #fff; font-size: 5px; line-height: 5px;">
<table width="100%" cellpadding="0" cellspacing="0" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<tr style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<td style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; vertical-align: top; font-size: 5px; line-height: 5px;"> </td>
</tr>
</table>
</td>
<td width="5%" class="bar background-color--quaternary-color" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; vertical-align: top; background-color: #896632; font-size: 5px; line-height: 5px;">
<table width="100%" cellpadding="0" cellspacing="0" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<tr style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<td style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; vertical-align: top; font-size: 5px; line-height: 5px;"> </td>
</tr>
</table>
</td>
<td width="1%" class="bar bar--gap background-color--white" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; vertical-align: top; background-color: #fff; font-size: 5px; line-height: 5px;">
<table width="100%" cellpadding="0" cellspacing="0" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<tr style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<td style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; vertical-align: top; font-size: 5px; line-height: 5px;"> </td>
</tr>
</table>
</td>
<td width="5%" class="bar background-color--secondary-color" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; vertical-align: top; background-color: #80a3b7; font-size: 5px; line-height: 5px;">
<table width="100%" cellpadding="0" cellspacing="0" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<tr style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<td style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; vertical-align: top; font-size: 5px; line-height: 5px;"> </td>
</tr>
</table>
</td>
<td width="1%" class="bar bar--gap background-color--white" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; vertical-align: top; background-color: #fff; font-size: 5px; line-height: 5px;">
<table width="100%" cellpadding="0" cellspacing="0" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<tr style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<td style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; vertical-align: top; font-size: 5px; line-height: 5px;"> </td>
</tr>
</table>
</td>
<td width="70%" class="bar bar--right background-color--primary-color" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; vertical-align: top; background-color: #8c9b93; font-size: 5px; line-height: 5px;">
<table width="100%" cellpadding="0" cellspacing="0" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<tr style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<td style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; vertical-align: top; font-size: 5px; line-height: 5px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" class="header" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; width: 100%; background-color: #fff; border-left: 1px solid #d4d4d4; border-right: 1px solid #d4d4d4;">
<tr style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<td class="header--content" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; padding: 24px;">
<table width="100%" cellpadding="0" cellspacing="0" class="logo" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; width: 250px; height: 44px;">
<tr style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<td class="logo--content" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; width: 250px; height: 44px;">
<img width="250" height="44" class="logo--image" src="http://frankie.franklinst.com/DesignSystem/images/logo/fs-logo-transparent.png" alt="Franklin Street" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; max-width: 100%; font-size: 22px; width: 250px; height: 44px; font-weight: 600;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="main" width="100%" cellpadding="0" cellspacing="0" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; background-color: #fff; border: 1px solid #d4d4d4;">
<tr style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<td class="main--content" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; padding: 24px;">
<!-- Content Goes Here -->
</td>
</tr>
</table>
<div class="footer" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; width: 100%; clear: both; color: #a9a9a9; padding: 12px 24px 24px;">
<table width="100%" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<tr style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<td class="text-align--center content-block" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; padding: 0 0 24px; text-align: center;">
<p class="footer--paragraph" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; margin-bottom: 12px; font-weight: 400; font-size: 12px; color: #a9a9a9; line-height: 21px;">
© <a class="footer--link" href="http://www.franklinst.com" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; text-decoration: underline; font-size: 12px; color: #a9a9a9; line-height: 21px;">Franklin Street</a>
</p>
<p class="footer--paragraph" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; margin-bottom: 12px; font-weight: 400; font-size: 12px; color: #a9a9a9; line-height: 21px;">
This email was automatically generated by <a class="footer--link" href="http://frankie.franklinst.com" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; text-decoration: underline; font-size: 12px; color: #a9a9a9; line-height: 21px;">Frankie</a>. Do not reply to this email.
</p>
</td>
</tr>
</table>
</div>
</div>
</td>
<td style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top;"></td>
</tr>
</table>
</body>
</html>
Email Content Example
In addition to the frame above, the main body content needs to be formatted and structured using inline styles and tables. The following is an example of what the body content could look like. NOTE: the body content should be placed within .main--content which is part of the email template frame.
<table width="100%" cellpadding="0" cellspacing="0" style="margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<tr style="margin: 0; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px;">
<td class="content-block" style="margin: 0; font-family:Helvetica,Arial,sans-serif; box-sizing:border-box; font-size:14px; vertical-align:top; padding:0 0 24px;">
<p style="margin: 0; font-family:Helvetica,Arial,sans-serif; box-sizing:border-box; font-size:14px; margin-bottom:12px; font-weight: 400;"><strong>Attn:</strong> Testy Testerson</p>
</td>
</tr>
</table>