This code sample is the Mobile Optimized Modular Email Template (MOMET) that I used for coding standard Scalable and Fluid emails for the American Greetings brand. It contains code snippets for each content element that was used across the brand emails. Basic snippets include a variety of linked images, pre-formatted and styled headline and copy text, along with text-based buttons. Additional code snippets maintained in this file include custom ampscript-driven personalization modules and dynamic content such as abandon card, reminders, and a loyalty program module (meaningful connection status).
This email markup has been extensively tested and validated for appearance using both Email on Acid and a variety of live personal mobile devices and desktops, as I and colleagues had noticed that at times the Acid test results and the experience on live devices could vary significantly. (This is most notable with interactive content, which this file does not contain).
This email template is set up with SalesForce Marketing Cloud (SFMC) and includes brand custom ampscript with send logging, unique and descriptive aliases on all links, and ampscript variables for personalization.
You can view the email here: Mobile Optimized Modular Email Template (Note that the image links are broken, so none of the images will display).
<!DOCTYPE html>
<!-- default / base ampscript -->
<!--
%%[
/* DECLARE THE VARIABLES */
Var @Email, @Cust_ID, @Site_Group, @Campaign_ID, @Treatment_ID, @CONTACT_ID, @insert
/* INITIALLY ASSIGN THE VARIABLE */
Set @Email = email_address
Set @Cust_ID = customer_id
/* SET THE VARIABLE FROM THE SENDING DATA EXTENSION */
IF memberid != 78510 THEN
Set @Site_Group = site_group
Set @Campaign_ID = campaign
Set @Treatment_ID = treatment_id
Set @CONTACT_ID = CONTACT_ID
ENDIF
/* DECIDE WHAT SOLICITATION DE TO SAVE THE DATA */
IF IsEmailAddress(_SubscriberKey) THEN
Set @insert = InsertDE("ENT.SOLICITATION_HISTORY_NOUID", "Job_ID", jobid, "SubscriberKey", _SubscriberKey,"Email", @Email, "Cust_ID", @Cust_ID, "Site_Group", @Site_Group, "Campaign_ID",@Campaign_ID, "Treatment_ID",@Treatment_ID, "CreatedDate", NOW(), "CONTACT_ID", @CONTACT_ID)
Set @insert = InsertDE("ENT.SOLICITATION_HISTORY_NOUID_EXT","Job_ID",jobid,"SubscriberKey",_SubscriberKey,"VAWP_Link",view_email_url,"Site_Group",@Site_Group,"CreatedDate",NOW())
ELSE
Set @insert = InsertDE("ENT.SOLICITATION_HISTORY", "Job_ID", jobid, "SubscriberKey", _SubscriberKey, "Email", @Email, "Cust_ID", @Cust_ID, "Site_Group", @Site_Group, "Campaign_ID", @Campaign_ID, "Treatment_ID", @Treatment_ID, "CreatedDate", NOW(), "CONTACT_ID",@CONTACT_ID)
Set @insert = InsertDE("ENT.SOLICITATION_HISTORY_EXT","Job_ID",jobid,"SubscriberKey",_SubscriberKey,"VAWP_Link",view_email_url,"Site_Group",@Site_Group,"CreatedDate",NOW())
ENDIF
]%%
/*END default / base ampscript */
/* SEND LOGGING. USED IN TRIGGERED AND DAILY SEND EMAILS. uses syntax: %%=v(@vFirstName)=%% and %%=v(@vPersData)=%% */
%%[
/* Script used to pull data from Send Log when the user is view the email as a webpage (VAWP) */
/* Define Variables */
var @vFirstName
var @vPersData
var @rows, @row, @rowCount
/* If the message is being viewed as a webpage, on social forward, or as forward to a friend */
if _MessageContext == "VAWP" or _MessageContext == "Social" or _MessageContext == "FTAF" then
/* Get the data from the send log */
set @rows = LookupRows("SendLogging","SubID",SubscriberID,"JobID",JobID,"BatchID",_JobSubscriberBatchID)
set @rowCount = rowcount(@rows)
if @rowCount > 0 then
set @row = row(@rows,1) /* get row #1 */
set @vFirstName = field(@row,"FIRST_NAME")
set @vPersData = field(@row,"PERS_DATA")
else
set @vFirstName = "Friend"
endif
else
/* Get the data from the sending data extension */
set @vFirstName = FIRST_NAME
set @vPersData = PERS_DATA
endif
]%%
/* END Send logging ampscript */
/*MEANINGFUL CONNECTIONS DYNAMIC MESSAGE BLOCK - DELETE IF NOT USING, or it will totally break the email. */
%%[
/* Write VAWP data for VAWP for the dynamic message block */
/* Includes cards sent and meaningful connections status image */
/* Dynamic block (note: unused fields were removed)
MYIMAGE_A = meaningful connection status image
MYTEXT_01 = ecard sends
MYTEXT_02 = meaningful connection status
*/
/* DECLARE THE VARIABLES */
Var @rows, @row, @rowCount
Var @MyImageA, @MyText01, @MyText02
/* INITIALLY ASSIGN THE VARIABLE */
if _MessageContext == "VAWP" or _MessageContext == "Social" or _MessageContext == "FTAF" then
set @rows = LookupRows("GenericMessageBlockVAWP","SubID",SubscriberID,"JobID",JobID,"BatchID",_JobSubscriberBatchID)
set @rowCount = rowcount(@rows)
if @rowCount > 0 then
Set @row = row(@rows,1) /* get row #1 */
Set @MyImageA = field(@row,"MYIMAGE_A")
Set @MyText01 = field(@row,"MYTEXT_01")
Set @MyText02 = field(@row,"MYTEXT_02")
EndIf
Else
Set @MyImageA = MYIMAGE_A
Set @MyText01 = MYTEXT_01
Set @MyText02 = MYTEXT_02
IF NOT EMPTY(@MyText01) THEN
InsertDE("GenericMessageBlockVAWP",
"JobID", jobid,
"ListID", listid,
"BatchID", _JobSubscriberBatchID,
"SubID", SubscriberID,
"MYIMAGE_A", @MyImageA,
"MYTEXT_01", @MyText01,
"MYTEXT_02", @MyText02,
"CreatedDate", NOW())
ENDIF
EndIf
]%%
/* END meaningfull connections ampscript */
/* Abandon Cart - Hard Goods Item ampScript */
%%[
var @rows, @row, @rowCount
var @quantity01, @description01, @imageURL01
var @quantity02, @description02, @imageURL02
var @quantity03, @description03, @imageURL03
var @quantity04, @description04, @imageURL04
var @treatment
if _MessageContext == "VAWP" or _MessageContext == "Social" or _MessageContext == "FTAF" then
set @rows = LookupRows("SendLogging","SubID",SubscriberID,"JobID",JobID,"BatchID",_JobSubscriberBatchID)
set @rowCount = rowcount(@rows)
if @rowCount > 0 then
set @row = row(@rows,1) /* get row #1 */
set @quantity01 = field(@row,"QUANTITY_01")
set @description01 = field(@row,"DESCRIPTION_01")
set @imageURL01 = field(@row,"IMAGE_URL_01")
set @quantity02 = field(@row,"QUANTITY_02")
set @description02 = field(@row,"DESCRIPTION_02")
set @imageURL02 = field(@row,"IMAGE_URL_02")
set @quantity03 = field(@row,"QUANTITY_03")
set @description03 = field(@row,"DESCRIPTION_03")
set @imageURL03 = field(@row,"IMAGE_URL_03")
set @quantity04 = field(@row,"QUANTITY_04")
set @description04 = field(@row,"DESCRIPTION_04")
set @imageURL04 = field(@row,"IMAGE_URL_04")
set @treatment = field(@row,"TREATMENT_ID")
endif
else
set @quantity01 = QUANTITY_01
set @description01 = DESCRIPTION_01
set @imageURL01 = IMAGE_URL_01
set @quantity02 = QUANTITY_02
set @description02 = DESCRIPTION_02
set @imageURL02 = IMAGE_URL_02
set @quantity03 = QUANTITY_03
set @description03 = DESCRIPTION_03
set @imageURL03 = IMAGE_URL_03
set @quantity04 = QUANTITY_04
set @description04 = DESCRIPTION_04
set @imageURL04 = IMAGE_URL_04
set @treatment = TREATMENT_ID
endif
]%%
/* End Abandon Cart - Hard Goods Item ampScript */
/* Abandon Cart - Coupon Code ampScript */
%%[
var @couponCode, @couponRows, @couponRowCount, @couponRow
set @couponCode = "None Available"
If @treatment == "ABD_CRT_OFFER" Then
If _messagecontext == "PREVIEW" Then
set @couponCode = "TestCoupon"
Else
If _MessageContext == "VAWP" or _MessageContext == "Social" or _MessageContext == "FTAF" then
set @couponRows = LookupRows("CouponCodes","SubscriberID",SubscriberID,"JobID",JobID,"BatchID",_JobSubscriberBatchID)
set @couponRowCount = rowcount(@couponRows)
if @couponRowCount > 0 then
set @couponRow = row(@couponRows,1) /* get row #1 */
set @couponCode = field(@couponRow,"CouponCode")
Else
set @couponCode = "None Available"
Endif
Else
set @couponCode = ClaimRowValue("CouponCodes","CouponCode","IsClaimed","None Available","EmailAddress",emailaddr,"JobID",jobid, "ListID",listid,"SubscriberID",subscriberid,"BatchID",_JobSubscriberBatchID)
EndIf
EndIf
EndIf
]%%
/*End Abandon Cart - Coupon Code ampscript */
-->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<!-- +++ update title with subject line -->
<!-- update or delete the gmail promo tab json settings above the body tag -->
<title>
%%=v(@vFirstName)=%%
</title>
<style>
++ -- MOMETS Email File - Coyote Holmberg 05/17/2019
Salesforce Marketing Cloud version with aliases
Verified - Email on Acid 5/17/2019
Notes:
*Pending updates to replace American Greetings content with placeholder elements and styling.
*Contains American Greetings custom ampscript and variables.
*Current styling and icons from American Greetings.
Core elements:
Scalable / Fluid design
*Responsive top navigation menu (not hamburger)
*BombProof button (replaces BulletProof button)
*Gmail Promotions Card Annotations
*Retina ready logo
*640px wide
Modules:
*Visible and Invisible PreHeaders
*Loyalty Program: Meaningful Connections Status (Top Text module and bottom dynamic banner)
*Abandon Cart with dynamic coupon code
*Abandon Cart with display cart contents
*****************************/
/* Defaults */
/*************************/
@-ms-viewport{ width: device-width;}
body {
margin:0;
padding:0;
word-wrap: normal!important;
}
body, tr, td, span, div, p, a, li {
-moz-text-size-adjust:none!important;
-webkit-text-size-adjust:none!important;
-ms-text-size-adjust:none!important;
white-space: wrap;
}
.ReadMsgBody{ width: 100%;}
.ExternalClass {width: 100%;}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {line-height:100%;}
table, table td {border-collapse:collapse;}
p {
margin:0 0 25px 0;
padding:0;
line-height:1.4em;
margin-bottom:0;
text-align:left;
}
/* images */
img {
display:block;
height:auto;
-ms-interpolation-mode: bicubic;
}
/*hide tracking pixels */
.tracking,
.tracking img {
height:1px!important;
max-height:1px!important;
}
/* +Client Hacks */
/********************************************/
/* cross device links */
.deviceLinks {
pointer-events: none;
cursor: default;
}
a.deviceLinks,
.deviceLinks > a {
text-decoration:none;
color:inherit;
}
a.disable-link {
pointer-events: none;
cursor: default;
}
a.deviceLinks,
.deviceLinks a {color:#585858 !important;}
.textArea .deviceLinks a {color:#585858!important;}
div{display:block!important;}
/*AOL 11 Link color */
.foot-nav-wrapper a {color:#ffffff;text-decoration:none;}
/* ++ Custom Styles */
/********************************************/
/* + Background Colors */
/*************************/
body {background-color: #ffffff;}
/* + Text */
/*************************/
body {
color:#585858; /* onsite: #333 */
font-family:Helvetica,Arial,sans-serif;
font-size:16px;
}
table, td, div, p {color:#585858;}
h1, h2, h3, h4, h5, h6 {
color:#333333;
display:block;
}
a,
.mainContent a {color: #585858;}
.footer a {color: #3366cc; /* blue*/}
/* preheader */
/*************************/
.preheaderContent, .preheaderContent a {
color:#585858;
font-size:14px!important;
}
.hiddenPreheader, .hiddenPreheader a {
color:#ffffff!important;
font-size:1px!important;
}
/*logo*/
/*************************/
.logo-cell {text-align:left;}
.logo {text-align:left;}
.left-logo-spacing {
display:inline;
width:15px!important;
}
.right-logo-spacing {
width:410px!important;
}
/* top nav */
.top-nav {
padding-left:16px!important;
text-align:left!important;
}
/* CTA buttons */
.button-spacing {height: 25px!important;}
/* reminders */
.reminders {height: inherit;}
/* + desktop and mobile adjustments */
/*************************/
.hideOnDesktop {
mso-hide:all;
display:none!important;
max-height:0;
overflow:hidden;
}
.hideOnMobile {
display:block!important;
}
/*--- ++ Media Queries ---*/
/*************************/
@media only screen and (min-width: 641px) { /*Apple Mail, iPad, iPad mini, Outlook 2011, 2016, outlook.com, yahoo*/
.hideOnMobile {display:none;}
/* AG logo. reset retina scaling on iPads to non-retina (50%) sizes. note that setting as a percentage causes weird scaling in some clients. */
.logo img {
height:75px!important;
width:217px!important;
}
/*top nav */
.top-nav img {
height:20px!important;
width:20px!important;
}
/* force top nav to stay in one line on desktop and tablet, but wrap to two lines on phones */
.nav-line-break {
display:inline!important;
width:20px!important;
height:20px!important;
clear: none!important;
}
}
@media only screen and (max-width: 640px) {
/* desktop vs mobile experience */
.hideOnMobile {
display:none!important;
width:0;
visibility: hidden;
}
.hideOnDesktop {
display:block!important;
max-height:none!important;
}
.deviceLinks {
pointer-events: none;
cursor: default;
}
a.deviceLinks,
.deviceLinks > a {
text-decoration:none;
color:inherit;
}
a.disable-link {
pointer-events: none;
cursor: default;
}
a.deviceLinks,
.deviceLinks a {color:#585858 !important;}
/*preheader */
.preheaderContent {text-align:left!important;}
ul li {font-size:18px!important;}
/* responsive 2 column text and image area */
table.image-deviceWidth {
margin:0 auto!important;
width:100%!important;
}
.image-deviceWidth td {padding:0!important;}
.side-text-module {width:100%!important;}
.side-text-module p {margin-left:0!important;}
/* reminders */
div.remindersWrapper {padding-top:30px;}
.remindersTitle p {font-size:140% !important;}
.reminders p { font-size: 120% !important; line-height: 140% !important;}
}
@media only screen and (max-width: 480px) {
.wrapper {width: 100%!important;}
/*logo */
.logo-cell {text-align:center;}
.logo {text-align:center !important}
.left-logo-spacing,
.right-logo-spacing {
display:inline !important;
width:20%!important;
}
/*top nav. wraps to two lines on mobile. */
.nav-line-break,
.nav-hideOnMobile {
display:block!important;
width:1px!important;
height:6px!important;
clear: both!important;
}
.top-nav {text-align:center!important;}
.top-nav a {
border:4px solid #fff!important;
font-size:22px!important;
line-height: 26px!important;
}
.top-nav-cell img {max-height:20px;max-width:20px;}
/* footer */
.footContent {
margin: 0 auto;
text-align:left;
width:100%;
}
/* 2 column text and image modules: image scaling */
table.image-deviceWidth {
margin:0 auto!important;
width:100%!important;
}
/* list positioning and indentation */
ul, .side-text-module ul {margin-left:60px!important;}
/* list positioning in 2 column text / image module */
.list-container {margin-left: 0 !important;}
/* reminders */
.reminders img {max-width: 60px !important;}
}
@media only screen and (min-width:480px) and (max-width:599px) {
.wrapper {width:100%!important;}
.hide-on-desktop {display:inline-block!important;}
}
/* AppleMail, iPad Air, Mini, Pro, Outlook OSX */
@media only screen and (min-device-width:601px) {
.left-logo-spacing {width:12px!important;}
.right-logo-spacing {width:400px!important;}
}
/* iPad 1, 2, Mini and Air */
@media only screen
and (min-device-width:768px)
and (max-device-width:1024px)
and (-webkit-min-device-pixel-ratio:1) {
.left-logo-spacing {width:10px!important;}
.right-logo-spacing {width:400px!important;}
}
/* iPhone i0S 6+, 7+, 8+ */
@media only screen
and (min-device-width:414px)
and (max-device-width:736px)
and (orientation:portrait)
and (-webkit-min-device-pixel-ratio: 2) {
/* reminders */
.reminders img {max-width: 60px !important;}
}
</style>
<!--[if gte mso 9]>
<style type="text/css">
/* Outlook specific hacks */
.logo-cell {text-align: left !important;}
.logo-cell .wrapper {width:640px !important; max-width: 100% !important;}
.left-logo-spacing {width:4px !important;}
.button-spacing {height:25px !important;}
.outLookSpacing {width:150px !important;}
.top-nav {text-align:left !important;}
image.full-width-image {
border: 1px solid #f00 !important;
width: 640px !important;
max-width:640px !important;
}
/* reminders */
div.remindersWrapper {margin-top:30px !important;}
.infobox p {margin-top: 20px !important;}
</style>
<![endif]-->
<!-- +++ Gmail Promotions Card Annotations - AG -->
<script type="application/ld+json">
[{
"@context": "http://schema.org/",
"@type": "Organization",
// --- AG Logo Icon. This only shows in the Gmail Card
"logo": "http://image.email.americangreetings.com/lib/feea1378716d0d/m/1/AG-Rose-2018.jpg"
},{
"@context": "http://schema.org/",
"@type": "EmailMessage",
// +++ --- subject line.
"subjectLine": " %%=v(@vFirstName)=%% "
},{
// --- Discount or offer.Max 30-35 characters if no coupon code. Remove this section if not used.
//This will be shown as a green badge (eg "25% off" or "free shipping.")
"@context": "http://schema.org/",
"@type": "DiscountOffer",
"description": " ",
// -- Promo / Coupon Code
// --- only include this field if using a discount / coupon code.
// --- This always has the word "code" in front of it if you include text here.
// "discountCode": " ",
// --- offer start and end date and time.
// --- -05:00 specifies EST in Universal time (UTC). -08:00 specifies PST. use 24 hour time format.
"availabilityStarts": "2019-01-01T10:00:00-05:00",
"availabilityEnds": "2019-12-31T23:59:59-05:00"
},{
// --- Promotion card with single jpg or png image.
"@context": "http://schema.org/",
"@type": "PromotionCard",
"image": "http://image.email.americangreetings.com/lib/feea1378716d0d/m/1/Gmail_Promo_Card_PC.png"
}]
</script>
<!-- end gmail annotations -->
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0" style="-moz-text-size-adjust:none!important; padding:0px!important; -webkit-text-size-adjust:none!important; margin:0px ! important; -ms-text-size-adjust:none!important; white-space: wrap;">
<!-- layout container -->
<div class="outer-container" align="center" style="margin:0 0 0 0; background-color:#FFFFFF; " >
<table class="outer-wrapper" border="0" cellspacing="0" cellpadding="0" width="640" style="max-width: 640px;" role="presentation" >
<tr><td valign="top" >
<table class="inner-wrapper" border="0" cellspacing="0" cellpadding="0" width="100%" style="width: 100%;" role="presentation" >
<tr><td>
<!-- end layout container. -->
<!-- ++ +++ hidden pre-header with view as webpage. use either the hidden or the visible pre-header. Delete the other one. -->
<div class="hiddenPreheader" style="font-family:Helvetica,Arial,sans-serif;font-size:1px;color:#ffffff;line-height:1px;mso-line-height-rule:exactly;display:none;max-width:0;height:1px;max-height:0;opacity:0;overflow:hidden;mso-hide:all;">
<!-- put hidden preheader text here -->
</div>
<!--- ++view as webpage -->
<table id="Preheader" class="preheaderContent"align="center" border="0" cellspacing="0" cellpadding="0" width="640" style="max-width: 100%;margin: 0 auto;" role="presentation" >
<tr>
<td valign="top" style="color:#585858;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:16px;padding-top:2px; padding-bottom:8px; padding-right:16px;text-align:right;" >
<div style="width: 100%; text-align:right;">
%%[if _MessageContext != "VAWP" then ]%%
<a href="%%View_Email_URL%%" alias="ViewAsWebpage" style="color:#585858; text-decoration:none;" target="_blank" >view as webpage</a>
%%[else]%%
%%[endif]%%
</div>
</td>
</tr>
</table>
<!--- end hidden Pre-header -->
<!--- ++ +++ Visible Pre-header - default link: same as hero -->
<table id="Preheader" class="preheaderContent"align="center" border="0" cellspacing="0" cellpadding="0" width="640" style="max-width: 100%;margin: 0 auto;" role="presentation" >
<tr>
<td valign="top" style="color: #585858;font-family:Helvetica, Arial, sans-serif;font-size: 14px;line-height:16px; padding-top:5px; padding-bottom:8px; padding-right:16px; text-align:right;" >
<a href="https://www.americangreetings.com/?%%=v(@vPersData)=%%" alias="preheader" style="text-decoration:none;" target="_blank" >
<!-- put visible preheader text here -->
</a>
</td>
</tr>
<tr>
<td valign="top" style="line-height:16px;padding-top:2px; padding-bottom:8px; padding-right:16px;text-align:right;" >
<div style="width: 100%; text-align:right;">
%%[if _MessageContext != "VAWP" then ]%%
<a href="%%View_Email_URL%%" alias="ViewAsWebpage" style="color:#585858; text-decoration:none;" target="_blank" >view as webpage</a>
%%[else]%%
%%[endif]%%
</div>
</td>
</tr>
</table>
<!--- end ++Pre-header -->
<!-- ++ logo and top nav. -->
<table class="wrapper" align="center" border="0" cellpadding="0" cellspacing="0" width="640" style="width:640px;">
<!-- Logo -->
<tr>
<td class="logo-cell" align="left" valign="top" style="line-height:12px; padding:0; margin:0; font-size:12px;">
<table class="wrapper" align="center" border="0" cellpadding="0" cellspacing="0" width="640">
<tr>
<td class="left-logo-spacing" align="left" valign="top" width="16" height="75" style="height:75px; width:16px; padding:0; margin:0;"></td>
<td class="logo" align="left" valign="top" width="217" height="75" style="width:217px; height:75px; padding:0; margin:0;">
<a href="https://www.americangreetings.com/?%%=v(@vPersData)=%%" alias="logo" target="_blank"><img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/american-greetings-logo-2018.png" width="217" height="75" alt="American Greetings" border="0" style="display:block;" ></a>
</td>
<td class="right-logo-spacing" align="left" valign="top" width="130" height="75" style="height:75px; margin:0; width:130px; padding:0;"></td>
</tr>
</table>
</td>
</tr>
<!-- end logo -->
<!-- ++ MAIN MENU STARTS HERE-->
<tr>
<td class="top-nav" align="left" valign="top" width="640" style="font-size:14px;line-height:16px;margin:0;padding:10px;width:640px;">
<a href="https://www.americangreetings.com/cards/ecards/_/N-1x91zju?%%=v(@vPersData)=%%" alias="topNavEcards" target="_blank" style="color:#3a3a3a;font-size:16px; font-family: Helvetica, Arial, sans-serif; font-style: normal; font-weight: bold; line-height:22px;padding-left:0;padding-right:8px;text-decoration: none; text-transform: none; vertical-align:top;">Ecards</a>
<img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/ag-nav2x-pipe.png" alt=" " width="20" height="20" border="0" style="display:inline;">
<a href="https://www.americangreetings.com/cards/printables/_/N-1v4rcuq?%%=v(@vPersData)=%%" alias="topNavPrintables" target="_blank" style="color:#3a3a3a;font-size:16px; font-family: Helvetica, Arial, sans-serif; font-style: normal; font-weight: bold; line-height:22px;padding-left:8px;padding-right:8px;text-decoration: none; text-transform: none; vertical-align:top;">Printables</a>
<img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/ag-nav2x-pipe.png" alt=" " width="20" height="20" border="0" style="display:inline;">
<a href="https://www.americangreetings.com/cards/paper-cards/_/N-12gn38a?%%=v(@vPersData)=%%" alias="topNavCards" target="_blank" style="color:#3a3a3a;font-size:16px; font-family: Helvetica, Arial, sans-serif; font-style: normal; font-weight: bold; line-height:22px;padding-left:8px;padding-right:8px;text-decoration: none; text-transform: none; vertical-align:top;">Cards</a>
<img class="nav-hideOnMobile" src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/ag-nav2x-pipe.png" alt=" " width="20" height="20" border="0" style="display:inline;">
<!-- force nav-line-break to two lines on mobile devices -->
<span class="nav-line-break" style="display:inline;"></span>
<a href="https://www.americangreetings.com/party/party-supplies/_/N-1pm9x9f?%%=v(@vPersData)=%%" alias="topNavParty" target="_blank" style="color:#3a3a3a;font-size:16px; font-family: Helvetica, Arial, sans-serif; font-style: normal; font-weight: bold; line-height:22px;padding-left:8px;padding-right:8px;text-decoration: none; text-transform: none; vertical-align:top;">Party</a>
<img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/ag-nav2x-pipe.png" alt=" " width="20" height="20" border="0" style="display:inline;">
<a href="https://www.americangreetings.com/gift-packaging/gift-wrap/_/N-1gmxsr1?%%=v(@vPersData)=%%" alias="topNavGiftWrap" target="_blank" style="color:#3a3a3a;font-size:16px; font-family: Helvetica, Arial, sans-serif; font-style: normal; font-weight: bold; line-height:22px;padding-left:8px;padding-right:8px;text-decoration: none; text-transform: none; vertical-align:top;">Gift Wrap</a>
<img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/ag-nav2x-pipe.png" alt=" " width="20" height="20" border="0" style="display:inline;">
<a href="https://www.americangreetings.com/gift-ideas/gifts/_/N-11ki5n2?%%=v(@vPersData)=%%" alias="topNavGifts" target="_blank" style="color:#3a3a3a;font-size:16px; font-family: Helvetica, Arial, sans-serif; font-style: normal; font-weight: bold; line-height:22px;padding-left:8px;padding-right:8px;text-decoration: none; text-transform: none; vertical-align:top;">Gifts</a>
</td>
</tr>
<!--MAIN MENU ENDS HERE-->
</table>
<!-- end logo and top nav table -->
<!-- +++ begin 640 main content table IMPORTANT - content must be inside <tr><td></td></tr> tags -->
<table class="main-content-wrapper" border="0" cellpadding="0" cellspacing="0" align="center" width="640" style="margin: 0 auto;" role="presentation" >
<!-- end main content table -->
<!-- do not delete anything above this line -->
<!-- begin dynamic salutations block - meaningful connections. do not delete! -->
<!-- horizontal line -->
<tr>
<td class="ribbon-image full-width-image" valign="top" >
<img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/AG-HRTop.jpg" alt=" " width="100%" border="0" align="top" class="full-width-image" style="display:block;" />
</td>
</tr>
<!-- ++ text area wrapper -->
<tr>
<td class="text-area" align="left" valign="top" style="border-collapse:collapse;color:#333333;font-family:Helvetica, Arial, sans-serif;font-size:20px;font-weight:bold;line-height:32px;padding-bottom:5px;vertical-align:top;text-decoration:none;width:640px;" >
<div class="text-container" align="center" style="display:block;margin: 10px 20px;width:600px;" >
<!-- end text area wrapper -->
<!-- begin text -->
<!-- ++ salutations (grey)-->
<p style="color:#333333;margin-top:0;margin-bottom:0;text-align:left;width:100%;" >
%%=v(@vFirstName)=%%, you sent %%=v(@MyText01)=%% ecards! <br>
Meaningful Connections Status: <span style="color:#D50032;">%%=v(@MyText02)=%%</span>
</p>
<!-- end text -->
<!-- close text area wrapper -->
</div>
</td></tr>
<!-- end text area wrapper -->
<!-- horizontal line -->
<tr>
<td class="ribbon-image full-width-image" valign="top" >
<img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/AG-HRTop.jpg" alt=" " width="100%" border="0" align="top" class="full-width-image" style="display:block;" />
</td>
</tr>
<!-- end dynamic salutations block - meaningful connections -->
<!-- ++ banner -->
<tr>
<td class="banner full-width-image" >
<a href="https://www.americangreetings.com/?%%=v(@vPersData)=%%" alias="banner" target="_blank"><img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/640-full-width.jpg" alt=" " width="100%" border="0" align="top" class="full-width-image" style="display:block;" ></a>
</td>
</tr>
<!-- ++ 2 column row - responsive -->
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="640" class="responsive-wrapper" style="width:640px;margin: 0 auto; border-spacing:0;border-collapse:collapse;" >
<tr>
<td valign="top" align="center" style="border-collapse:collapse;" >
<!-- Start: Column 1 -->
<table cellpadding="0" cellspacing="0" border="0" align="left" width="320" class="image-deviceWidth" style="width:320px;border-spacing:0;border-collapse:collapse;" >
<tr>
<td align="center" valign="top" style="border-collapse:collapse;" >
<a href="https://www.americangreetings.com?%%=v(@vPersData)=%%" alias="item1" target="_blank" >
<img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/320-half-width.jpg" alt=" " border="0" class="image-deviceWidth" width="320" style="width:100%;max-width:640px;border-width:0;" ></a>
</td>
</tr>
</table>
<!-- End: Column 1 -->
<!--[if gte mso 9]></td><td valign="top" style="border-collapse:collapse;" ><![endif]-->
<!-- Start: Column 2 -->
<table cellpadding="0" cellspacing="0" border="0" align="left" width="320" class="image-deviceWidth" style="width:320px;border-spacing:0;border-collapse:collapse;" >
<tr>
<td align="center" valign="top" style="border-collapse:collapse;" >
<a href="https://www.americangreetings.com/?%%=v(@vPersData)=%%" alias="item2" target="_blank" >
<img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/320-half-width.jpg" alt=" " border="0" class="image-deviceWidth" width="320" style="width:100%;max-width:640px;border-width:0;" ></a>
</td>
</tr>
</table>
<!-- End: Column 2 -->
</td>
</tr>
</table>
</td>
</tr>
<!-- end 2 column row - responsive -->
<!-- start - ++ two column row - NOT RESPONSIVE -->
<tr>
<td>
<table class="two-columns" cellpadding="0" cellspacing="0" border="0" align="center" width="100%" role="presentation" >
<tr>
<td>
<a href="https://www.americangreetings.com?%%=v(@vPersData)=%%" alias="item1" target="_blank" >
<img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/320-half-width.jpg" alt=" " width="320" border="0" style="display:block;" ></a>
</td>
<td>
<a href="https://www.americangreetings.com/cards/paper-cards/everyday/for-friend/_/N-tzd35sZ1eo6u3dZ12gn38a?%%=v(@vPersData)=%%" alias="item2" target="_blank" >
<img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/320-half-width.jpg" alt=" " width="320" border="0" style="display:block;" ></a>
</td>
</tr>
</table>
</td>
</tr>
<!-- end two column row -->
<!-- start - ++ - three column row NOT RESPONSIVE -->
<tr>
<td>
<table class="three-columns" cellpadding="0" cellspacing="0" border="0" align="center" width="100%" role="presentation" >
<tr>
<td>
<a href="https://www.americangreetings.com?%%=v(@vPersData)=%%" alias="item1" target="_blank" >
<img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/2018_AG_213x320_01.png" alt=" " width="213" border="0" style="display:block;" ></a>
</td>
<td>
<a href="https://www.americangreetings.com?%%=v(@vPersData)=%%" alias="item2" target="_blank" >
<img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/2018_AG_214x320_01.png" alt=" " width="214" border="0" style="display:block;" ></a>
</td>
<td>
<a href="https://www.americangreetings.com?%%=v(@vPersData)=%%" alias="item3" target="_blank" >
<img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/2018_AG_213x320_01.png" alt=" " width="213" border="0" style="display:block;" ></a>
</td>
</tr>
</table>
</td>
</tr>
<!-- start - ++ - four item row -->
<tr>
<td>
<table class="four-columns" cellpadding="0" cellspacing="0" border="0" align="center" width="100%" role="presentation" >
<tr>
<td>
<a href="https://www.americangreetings.com?%%=v(@vPersData)=%%" alias="item1" target="_blank" >
<img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/160-quarter-width.jpg" alt=" " width="160" border="0" style="display:block;" ></a>
</td>
<td>
<a href="https://www.americangreetings.com?%%=v(@vPersData)=%%" alias="item2" target="_blank" >
<img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/160-quarter-width.jpg" alt=" " width="160" border="0" style="display:block;" ></a>
</td>
<td>
<a href="https://www.americangreetings.com?%%=v(@vPersData)=%%" alias="item3" target="_blank" >
<img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/160-quarter-width.jpg" alt=" " width="160" border="0" style="display:block;" ></a>
</td>
<td>
<a href="https://www.americangreetings.com?%%=v(@vPersData)=%%" alias="item4" target="_blank" >
<img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/160-quarter-width.jpg" alt=" " width="160" border="0" style="display:block;" ></a>
</td>
</tr>
</table>
</td>
</tr>
<!-- Text area wrapper -->
<tr>
<td class="text-area" align="left" valign="top" style="border-collapse:collapse;color:#333333;font-family:Helvetica, Arial, sans-serif;font-size:18px;line-height:32px;padding-bottom:5px;vertical-align:top;text-decoration:none;width:640px;" >
<div class="text-container" align="center" style="display:block;margin: 10px 20px;width:600px;" >
<!-- end text area wrapper -->
<!-- begin text -->
<!-- ++ H1 headline Text -->
<h1 style="color:#333333;font-weight:normal;font-size:36px;line-height:42px;margin:20px 0 30px 0;text-align:left;">
<a href="https://www.americangreetings.com/join?%%=v(@vPersData)=%%" alias="headline" style="color:#333333; text-decoration:none;" target="_blank" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</a>
</h1>
<!-- ++ H2 subheadline -->
<h2 style="color:#333333;font-weight:normal;font-size:26px;line-height:32px;margin:20px 0 30px 0;text-align:left;">
<a href="https://www.americangreetings.com/cards?%%=v(@vPersData)=%%" alias="subheadline" style="color:#333333; text-decoration:none;" target="_blank" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</a>
</h2>
<!-- Abandon Cart headlines -->
<!-- ++ Abandon Cart hard goods - offer H1 Text (blue) -->
<h1 style="color:#5491FC;font-weight:normal;font-size:38px;line-height:42px;margin:20px 0 30px 0;text-align:left;">
<a href="https://www.americangreetings.com/cart?%%=v(@vPersData)=%%" alias="title" style="color:#5491FC; text-decoration:none;" target="_blank" >
There's a <span class="strong" style="font-weight:bold;">cool deal</span> in your cart!
</a>
</h1>
<!-- end Abandon Cart Headlines -->
<!-- ++ salutations -->
<p style="margin-top:0;margin-bottom:15px;text-align:left;" width="100%" >
Dear %%=v(@vFirstName)=%%,
</p>
<!-- Abandon Cart - Hard Goods - Offer - Coupon Code Details -->
<p style="font-size:18px; margin-top:0;margin-bottom:15px;text-align:left;" width="100%" >
You recently added some great items to your cart. We'd hate for you to miss out on these products, so <a href="https://www.americangreetings.com/cart?%%=v(@vPersData)=%%" alias="CompleteOrder" style="color:#585858;font-weight:bold; text-decoration:underline;" target="_blank" >complete your order</a> today.
</p>
%%[ IF @couponCode != "None Available" THEN ]%%
<p style="color:#5491FC;font-size:22px; font-weight:bold; margin-top:0;margin-bottom:5px;text-align:left;" width="100%" >
Enjoy 3 dollars off orders of $20 or more!*
</p>
<p style="font-size:20px;font-weight:bold;margin-top:20px;margin-bottom:25px;text-align:left;" width="100%" >
Your coupon code: <span style="color:#5491FC;">%%=v(@couponCode)=%%</span>
</p>
%%[endif]%%
<!-- End Abandon Cart - Hard Goods - Offer - Coupon Code Details -->
<!-- ++ account details -->
<p style="margin-top:15px;margin-bottom:15px;text-align:left;" width="100%" >
Your account details:<br>
Expiration date: Expiration date: %%=FormatDate(@vContrctEndDate, "MM/DD/YYYY")=%%<br>
Email address: %%=v(@vEmailAddr)=%%<br>
Password: <a href="https://www.americangreetings.com/myaccount/forgotpassword?%%=v(@vPersData)=%%" alias="textLinkPassword" style="color:#585858;font-weight:normal; text-decoration:underline;" target="_blank" >Forgot your password</a>?
</p>
<!-- end account details -->
<!-- paragraph text -->
<p style="margin-top:0;margin-bottom:15px;text-align:left;" width="100%" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. Ut aliquet tristique nisl vitae volutpat. Nulla aliquet porttitor venenatis.
<a href="https://www.americangreetings.com/?%%=v(@vPersData)=%%" alias="textLink" style="color:#d50032;font-weight:bold; text-decoration:underline;" target="_blank" >view link</a>
<span class="deviceLinks">AmericanGreetings.com</span>
</p>
<!-- end paragraph text -->
<!-- start pure CSS button grey button white text -->
<div><!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" alias="cta-button" href="https://www.americangreetings.com/cart?%%=v(@vPersData)=%%" style="height:40px;v-text-anchor:middle;width:250px;" strokecolor="#333333" fillcolor="#333333"target="_blank" >
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:18px;font-weight:bold;">View My Cart</center>
</v:rect>
<![endif]--><a href="https://www.americangreetings.com/cart?%%=v(@vPersData)=%%" alias="CTA-button"
style="background-color:#333333;border:1px solid #333333;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:18px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:250px;-webkit-text-size-adjust:none;mso-hide:all;" target="_blank" >View My Cart</a></div>
<!-- end pure CSS button -->
<!-- ++ list -->
<!-- left/right margins on UL tag -->
<ul class="bulletList" style="font-size:18px;line-height:30px; padding: 0; margin: 0 0 0 30px;text-align:left;">
<!-- top/bottom margins on LI tag -->
<li style="Margin: 10px 0 10px 0;font-weight:normal;">
Lorem ipsum dolor sit amet
</li>
<li style="Margin: 0 0 10px 0;font-weight:normal;">
Lorem ipsum dolor sit amet
</li>
<li style="Margin: 0 0 10px 0;font-weight:normal;">
Lorem ipsum dolor sit amet
</li>
<li style="Margin: 0 0 10px 0;font-weight:normal;">
Lorem ipsum dolor sit amet
</li>
</ul>
<!-- end list-->
<!-- close 600px wide text area wrapper -->
</div><!-- end text-container-->
</td>
</tr>
<!-- end 600px wide text area wrapper -->
<!-- Abandon Cart - Cart Contents -->
<!-- abandon cart products -->
%%[ IF @quantity01 > 0 THEN ]%%
<!-- ++ product 1 - left image, right text -->
<tr><td>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="left" class="sideImageContent" style="width:640px;max-width: 100%;border-spacing:0;border-collapse:collapse;" >
<tr>
<!--
<td class="mobileview" style="border-collapse:collapse;width:20px;" ><img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/spacer.gif" alt="" border="0" width="20" />
</td>
-->
<td align="center" class="desktopview" valign="top" style="border-collapse:collapse;vertical-align:top;text-decoration:none;" >
<!-- Start: left image #1- orig size 450px wide -->
<a href="https://www.americangreetings.com/cart?%%=v(@vPersData)=%%" alias="product1" style="color:#009999;display:block;margin-bottom:6px;text-decoration:none;" target="_blank" >
<img src="%%=v(@imageURL01)=%%" alt=" " border="0" class="desktopview" width="300" style="width:100%;max-width: 300px;border-width:0;" />
</a>
<!-- End left image -->
</td>
<td style="border-collapse:collapse;width:20px;" >
<img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/spacer.gif" alt="" border="0" width="20" />
</td>
<td valign="top" style="border-collapse:collapse;" >
<!-- Start: right text -->
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="left" class="leftText deviceWidth" style="width:300px;max-width: 100%;" >
<tr>
<td align="left" class="leftSideText" valign="top" style="padding-top:30px;padding-bottom:1px;padding-right:0;padding-left:0;border-collapse:collapse;font-size:18px;line-height:30px;mso-line-height-rule:exactly;vertical-align:top;text-decoration:none;" >
<!-- begin text -->
<p style="font-size:18px; color:#585858;margin-top:0;margin-bottom:10px;text-align:left;" width="100%" >
<strong>%%=v(@description01)=%%</strong> <br><br>
QUANTITY: %%=v(@quantity01)=%% <br>
</p>
</td>
</tr>
</table>
<!-- End: right hand column (text) -->
</td>
</tr>
</table>
</td></tr>
<!-- end product 1 -->
%%[ endif]%%
%%[ IF @quantity02 > 0 THEN ]%%
<!-- ++ product 2 - left image, right text -->
<tr><td>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="left" class="sideImageContent" style="width:640px;max-width: 100%;border-spacing:0;border-collapse:collapse;" >
<tr>
<!--
<td class="mobileview" style="border-collapse:collapse;width:20px;" ><img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/spacer.gif" alt="" border="0" width="20" />
</td>
-->
<td align="center" class="desktopview" valign="top" style="border-collapse:collapse;vertical-align:top;text-decoration:none;" >
<!-- Start: left image #2- orig size 450px wide -->
<a href="https://www.americangreetings.com/cart?%%=v(@vPersData)=%%" alias="product2" style="color:#009999;display:block;margin-bottom:6px;text-decoration:none;" target="_blank" >
<img src="%%=v(@imageURL02)=%%" alt=" " border="0" class="desktopview" width="300" style="width:100%;max-width: 300px;border-width:0;" />
</a>
<!-- End left image -->
</td>
<td style="border-collapse:collapse;width:20px;" >
<img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/spacer.gif" alt="" border="0" width="20" />
</td>
<td valign="top" style="border-collapse:collapse;" >
<!-- Start: right text -->
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="left" class="leftText deviceWidth" style="width:300px;max-width: 100%;" >
<tr>
<td align="left" class="leftSideText" valign="top" style="padding-top:30px;padding-bottom:1px;padding-right:0;padding-left:0;border-collapse:collapse;font-size:18px;line-height:30px;mso-line-height-rule:exactly;vertical-align:top;text-decoration:none;" >
<!-- begin text -->
<p style="font-size:18px; color:#585858;margin-top:0;margin-bottom:10px;text-align:left;" width="100%" >
<strong>%%=v(@description02)=%%</strong> <br><br>
QUANTITY: %%=v(@quantity02)=%% <br>
</p>
</td>
</tr>
</table>
<!-- End: right hand column (text) -->
</td>
</tr>
</table>
</td></tr>
<!-- end product 2 -->
%%[ endif]%%
%%[ IF @quantity03 > 0 THEN ]%%
<!-- ++ product 3 - left image, right text -->
<tr><td>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="left" class="sideImageContent" style="width:640px;max-width: 100%;border-spacing:0;border-collapse:collapse;" >
<tr>
<!--
<td class="mobileview" style="border-collapse:collapse;width:20px;" ><img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/spacer.gif" alt="" border="0" width="20" />
</td>
-->
<td align="center" class="desktopview" valign="top" style="border-collapse:collapse;vertical-align:top;text-decoration:none;" >
<!-- Start: left image #3- orig size 450px wide -->
<a href="https://www.americangreetings.com/cart?%%=v(@vPersData)=%%" alias="product3" style="color:#009999;display:block;margin-bottom:6px;text-decoration:none;" target="_blank" >
<img src="%%=v(@imageURL03)=%%" alt=" " border="0" class="desktopview" width="300" style="width:100%;max-width: 300px;border-width:0;" />
</a>
<!-- End left image -->
</td>
<td style="border-collapse:collapse;width:20px;" >
<img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/spacer.gif" alt="" border="0" width="20" />
</td>
<td valign="top" style="border-collapse:collapse;" >
<!-- Start: right text -->
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="left" class="leftText deviceWidth" style="width:300px;max-width: 100%;" >
<tr>
<td align="left" class="leftSideText" valign="top" style="padding-top:30px;padding-bottom:1px;padding-right:0;padding-left:0;border-collapse:collapse;font-size:18px;line-height:30px;mso-line-height-rule:exactly;vertical-align:top;text-decoration:none;" >
<!-- begin text -->
<p style="font-size:18px; color:#585858;margin-top:0;margin-bottom:10px;text-align:left;" width="100%" >
<strong>%%=v(@description03)=%%</strong> <br><br>
QUANTITY: %%=v(@quantity03)=%% <br>
</p>
</td>
</tr>
</table>
<!-- End: right hand column (text) -->
</td>
</tr>
</table>
</td></tr>
<!-- end product 3 -->
%%[ endif]%%
%%[ IF @quantity04 > 0 THEN ]%%
<!-- ++ product 4 - messaging -->
<tr><td>
<p style="font-size:22px; line-height:26px;color:#585858;margin-top:0;margin-bottom:10px;text-align:center;" width="100%" >
<a href="https://www.americangreetings.com/cart?%%=v(@vPersData)=%%" alias="moreInCart" style="color:#36c;font-weight:bold;text-decoration:underline;" target="_blank" >
You have more in your cart.
</a>
</p>
</td></tr>
<!-- end product 4 -->
%%[ endif]%%
<!-- end abandon cart product list -->
<!-- Abandon cart - view cart button grey white text -->
<tr>
<td class="button" align="center" >
<div style="margin: 0 auto;width:100%;"><!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.americangreetings.com/cart?%%=v(@vPersData)=%%" style="height:40px;v-text-anchor:middle;width:250px;" strokecolor="#333333" fillcolor="#333333"target="_blank" >
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:18px;font-weight:bold;">View My Cart</center>
</v:rect>
<![endif]--><a href="https://www.americangreetings.com/cart?%%=v(@vPersData)=%%"
style="background-color:#333333;border:1px solid #333333;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:18px;font-weight:bold;line-height:40px;margin:0 auto;text-align:center;text-decoration:none;width:250px;-webkit-text-size-adjust:none;mso-hide:all;" target="_blank" >View My Cart</a></div>
</td>
</tr>
<!-- end Abandon cart - view cart button -->
<!-- end Abandon Cart - Cart Contents -->
<!-- ++ - left text with h2 title and bullet list, right image -->
<tr><td>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="left" class="sideImageContent" style="margin: 20px auto;width:640px;max-width: 100%;border-spacing:0;border-collapse:collapse;" >
<tr>
<td class="mobileview" style="border-collapse:collapse;width:20px;" ><img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/spacer.gif" alt="" border="0" width="20">
</td>
<td valign="top" style="border-collapse:collapse;" >
<!-- Start: Left hand column (text) -->
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="left" class="side-text-module deviceWidth" style="width:300px;max-width: 100%;" >
<tr>
<td align="left" valign="top" style="padding-top:0;padding-bottom:1px;padding-right:0;padding-left:0;border-collapse:collapse;font-size:15px;line-height:30px;mso-line-height-rule:exactly;vertical-align:top;text-decoration:none;" >
<!-- begin text -->
<h2 style="mso-line-height-rule:exactly; margin: 0 0 20px 0;padding:0;color:#333333;font-weight:normal;font-size:26px;">
<a href="https://www.americangreetings.com/cards?%%=v(@vPersData)=%%" alias="subtitle" style="color:#333333; text-decoration:none;" target="_blank" >
Linked headline Lorem ipsum dolor sit amet
</a>
</h2>
<!-- paragraph 1 -->
<p style="font-size:18px; color:#585858;margin-top:0;margin-bottom:10px;text-align:left;" width="100%" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<!-- unordered list -->
<ul class="bulletList" style="font-size:18px;line-height:30px; padding: 0; margin: 0 0 0 30px;font-weight:bold;"><!-- left/right margins on UL tag -->
<!-- top/bottom margins on LI tag -->
<li style="Margin: 10px 0 10px 0;font-weight:normal;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<li style="Margin: 0 0 10px 0;font-weight:normal;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
</ul>
<!-- end unordered list -->
<!-- end text -->
</td>
</tr>
</table>
<!-- End: Left hand column (text) -->
</td>
<td style="border-collapse:collapse;width:1px;" ><img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/spacer.gif" alt="" border="0" width="1">
</td>
<td align="center" class="desktopview" valign="top" style="border-collapse:collapse;vertical-align:top;text-decoration:none;" >
<!-- Start: Right hand column (image) #1 -->
<a href="https://www.americangreetings.com/cards?%%=v(@vPersData)=%%" alias="sideImage" style="color:#009999;display:block;margin-bottom:6px;text-decoration:none;" target="_blank" >
<img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/320-half-width.jpg" alt="" border="0" class="desktopview" width="320" style="width:100%;max-width: 320px;border-width:0;">
</a>
<!-- End: Right hand column (image) -->
</td>
</tr>
</table>
</td></tr>
<!-- end section: title with left text, right image -->
<!-- ++ start: centered image signature -->
<tr>
<td class="signature full-width-image" >
<a href="https://www.americangreetings.com/?%%=v(@vPersData)=%%" alias="signature" target="_blank" ><img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/2018-AG-SIG-CNTRD.png" alt="Your Friends at American Greetings" width="100%" border="0" align="top" class="full-width-image" style="display:block;" ></a>
</td>
</tr>
<!-- end: centered image signature -->
<!-- ++ Dynamic Meaningful Connections Status banner -->
%%[ IF Not Empty(@MyImageA) THEN ]%%
<tr>
<td class="banner-image full-width-image" >
<img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/%%=v(@MyImageA)=%%" alt="Meaningful Connection Status: %%=v(@vMC_Status)=%%" width="100%" border="0" align="top" class="full-width-image" style="display:block;" >
</td>
</tr>
%%[ endif ]%%
<!-- ++ end Dynamic Meaningful Connections Status banner -->
<!-- ++ do not delete! close #main content table -->
</table>
<!-- end 640 main content table -->
<!-- end default foot nav -->
<!-- +++ start default shop foot nav -->
<table class="foot-nav-wrapper" border="0" cellpadding="0" cellspacing="0" align="center" width="640" style="margin: 0 auto;" role="presentation" >
<!-- optional 30px spacing -->
<tr>
<td class="spacer-30"><img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/spacer30.png" width="640" style="max-height:30;"></td>
</tr>
<!-- shop bundles -->
<tr>
<td valign="top" align="center" height="43" style="background-color:#58585B;font-family:Arial,Helvetica,serif;font-size:24px; line-height: 40px; color:#ffffff;text-align:center; border-bottom:#58585B solid 2px;" >
<a href="https://www.americangreetings.com/cards/paper-cards/greeting-card-bundles/_/N-1pa84k6?%%=v(@vPersData)=%%" alias="footNavShopBundles" style="text-decoration:none;color:#ffffff;" target="_blank" >
shop all greeting card bundles
</a>
</td>
</tr>
<tr>
<td class="spacer-20"><img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/spacer-20.gif" width="20" height="20" style="max-height:20;"></td>
</tr>
<!-- shop gifts -->
<tr>
<td valign="top" align="center" height="43" style="background-color:#58585B;font-family:Arial,Helvetica,serif;font-size:24px; line-height: 40px; color:#ffffff;text-align:center; border-bottom:#58585B solid 2px;" >
<a href="https://www.americangreetings.com/gift-ideas/gifts/_/N-11ki5n2?%%=v(@vPersData)=%%" alias="footNavShopGifts" style="text-decoration:none;color:#ffffff;" target="_blank" >
shop all gifts
</a>
</td>
</tr>
<tr>
<td class="spacer-20"><img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/spacer-20.gif" width="20" height="20" style="max-height:20;"></td>
</tr>
<!-- shop cards -->
<tr>
<td valign="top" align="center" height="43" style="background-color:#58585B;font-family:Arial,Helvetica,serif;font-size:24px; line-height: 40px; color:#ffffff;text-align:center; border-bottom:#58585B solid 2px;" >
<a href="https://www.americangreetings.com/cards/paper-cards/_/N-12gn38a?%%=v(@vPersData)=%%" alias="footNavShopCards" style="text-decoration:none;color:#ffffff;" target="_blank" >
shop all cards
</a>
</td>
</tr>
<tr>
<td class="spacer-20"><img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/spacer-20.gif" width="20" height="20" style="max-height:20;"></td>
</tr>
<!-- shop gift wrap -->
<tr>
<td valign="top" align="center" height="43" style="background-color:#58585B;font-family:Arial,Helvetica,serif;font-size:24px; line-height: 40px; color:#ffffff;text-align:center; border-bottom:#58585B solid 2px;" >
<a href="https://www.americangreetings.com/gift-packaging/gift-wrap/_/N-1gmxsr1?%%=v(@vPersData)=%%" alias="footNavGiftWrap" style="text-decoration:none;color:#ffffff;" target="_blank" >
shop all gift wrap
</a>
</td>
</tr>
<tr>
<td class="spacer-20"><img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/spacer-20.gif" width="20" height="20" style="max-height:20;"></td>
</tr>
<!-- shop party supplies -->
<tr>
<td valign="top" align="center" height="43" style="background-color:#58585B;font-family:Arial,Helvetica,serif;font-size:24px; line-height: 40px; color:#ffffff;text-align:center; border-bottom:#58585B solid 2px;" >
<a href="https://www.americangreetings.com/party/party-supplies/_/N-1pm9x9f?%%=v(@vPersData)=%%" alias="footNavPartySupplies" style="text-decoration:none;color:#ffffff;" target="_blank" >
shop all party supplies
</a>
</td>
</tr>
<tr>
<td class="spacer-20"><img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/spacer-20.gif" width="20" height="20" style="max-height:20;"></td>
</tr>
<!-- disclaimer - -->
<tr>
<td valign="top" style="background-color:#ffffff;font-family:Arial,Helvetica,serif;font-size:13px; line-height: 16px; color:#888888;text-align:left; border-bottom:#ffffff solid 2px;" >
<a href="https://www.americangreetings.com/promotions?%%=v(@vPersData)=%%" alias="footNavDisclaimer" style="text-decoration:none;color:#888888;" target="_blank" >
Coupon code WEDDINGSEASON is valid on cards, gift wrap & party supplies. Excludes gifts, ecard subscriptions and print-on-demand product. No minimum purchase necessary. Offer does not apply to shipping & handling charges. Offer is not valid on previous purchases and cannot be combined with other coupons. To prevent abuse, we reserve the right to discontinue or modify this offer at any time without notice. Offer is subject to change and expires on 5/31/18 at 11:59 pm PST. Offer intended for use in the United States.
</a>
</td>
</tr>
<tr>
<td class="spacer-20"><img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/spacer-20.gif" width="20" height="20" style="max-height:20;"></td>
</tr>
<!-- close shop foot nav -->
</table>
<!-- end shop foot nav -->
<!-- begin +SocialFollow 640 -4/9/2018 -->
<table border="0" cellSpacing="0" cellPadding="0" width="100%" align="center" class="social-follow" valign="top" style="width:100%; max-width:640px;" role="presentation" >
<tr>
<td class="hideOnMobile"><img style="display:block;" border="0" alt="" src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/2017-AG-social_00.png" width="80"></td>
<td>
<a href="https://www.facebook.com/AmericanGreetings?%%=v(@vPersData)=%%" alias="Facebook" target="_blank" >
<img style="display:block;" border="0" alt="follow us on facebook" src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/2017-AG-facebook.png" width="78"></a>
</td>
<td>
<a href="https://twitter.com/amgreetings?%%=v(@vPersData)=%%" alias="Twitter" target="_blank" >
<img style="display:block;" border="0" alt="follow us on twitter" src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/2017-AG-twitter.png" width="78"></a>
</td>
<td>
<a href="https://pinterest.com/amgreetings/?%%=v(@vPersData)=%%" alias="Pinterest" target="_blank" >
<img style="display:block;" border="0" alt="follow us on pinterest" src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/2017-AG-pinterest.png" width="78"></a>
</td>
<td>
<a href="https://instagram.com/amgreetings?%%=v(@vPersData)=%%" alias="Instagram" target="_blank" >
<img style="display:block;" border="0" alt="follow us on instagram" src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/2017-AG-instagram.png" width="78"></a>
</td>
<td style="font-family:Helvetica,Arial,sans-serif; font-size:13px; color:#585858;" ><a href="https://www.americangreetings.com/blog?%%=v(@vPersData)=%%" alias="Blog" target="_blank" ><img style="display:block;" border="0" alt="visit our blog" src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/2017-AG-blog.png" width="78"></a></td>
<td class="hideOnMobile" ><img style="display:block;" border="0" alt="" src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/2017-AG-social_00.png" width="125"></td>
</tr>
</table>
<!-- end +SocialFollow 640 -->
<!-- ++ Footer - OptOut -->
<table width="590" cellpadding="0" cellspacing="0" align="center" style="font-family: Helvetica, Arial, sans-serif; font-size:16px;font-style: normal;margin: 0 auto;max-width:90%;width: 590px;" id="footWrapper" role="presentation" >
<tr><td class="tracking" aria-hidden="true" >
<custom name="opencounter" type="tracking">
</td></tr>
<tr>
<td class="footer" style="text-align: left;" >
<div style="margin: 0 20px;max-width: 590px;" role="footer" >
<p style="margin-top:0;margin-bottom:15px;text-align:left;" width="100%" >
<span style="/*color: #b4002a;*/color:#cc3333;font-weight: bold;">PRIVACY POLICY</span> | View our
<a href="https://www.americangreetings.com/privacy-policy?%%=v(@vPersData)=%%" alias="privacyPolicy" style="color:#333333; text-decoration: underline;" target="_blank" >privacy policy</a>.
</p>
<p style="margin-top:0;margin-bottom:15px;text-align:left;" width="100%" >
This email was sent by, or on behalf of, <span class="deviceLinks">%%Member_Busname%%, %%Member_Addr%%, %%Member_City%%, %%Member_State%% %%Member_PostalCode%%</span>.
</p>
<p style="margin-top:0;margin-bottom:15px;text-align:left;" width="100%" >
If you prefer not to receive promotional email from <span class="deviceLinks">%%Member_Busname%%</span>, please visit our <a href="%%subscription_center_url%%"alias="unSubscribe" style="color: #333333; text-decoration: underline;" target="_blank" >subscription center</a>.
</p>
<p style="margin-top:0;margin-bottom:15px;text-align:left;" width="100%" >
For customer service issues, please do not reply to this email. Instead, please visit our <a href="https://www.americangreetings.com/faq?%%=v(@vPersData)=%%" alias="FAQS" style="color:#333333; text-decoration: underline;" target="_blank" >FAQs</a>.
</p>
<p style="margin-top:0;margin-bottom:15px;text-align:left;" width="100%" >This email was sent to: %%emailaddr%%</p>
<p style="margin-top:0;margin-bottom:15px;text-align:left;" width="100%" >Copyright © 2019 AGC,LLC. All rights reserved</p>
</div>
</td>
</tr>
</table>
<!-- closing container. -->
</td></tr></table><!-- end inner Wrapper" -->
</td></tr></table><!-- end outer #Wrapper -->
</div><!-- end container -->
</body>
</html>