This code sample is the base template that I used for coding standard Scalable and Fluid emails for the American Greetings brand. It contains the standard “sticky” elements used in all emails: logo, top and foot navigation, social media, and so on along with placeholders for the most commonly used content elements such as linked images and text-based buttons.

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: Minimalist Base Email Template

<!DOCTYPE html>
<!-- base ampscript with send logging. -->
<!--
%%[
/* 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 */
/* end base ampscript with send logging */
-->
<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>
/*********************************
++ -- Minimal 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.
Includes:
Scalable / Fluid design
*Responsive top navigation menu (not hamburger)
*BombProof button (replaces BulletProof button)
*Gmail Promotions Card Annotations
*Retina ready logo
*Visible PreHeader
*640px wide
*****************************/
/* 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 {
      border-style: none;
      display:block;
      height:auto;
      -ms-interpolation-mode: bicubic;
}
/*hide tracking pixels */
.tracking,
.tracking img {
    height:1px!important;
    max-height:1px!important;
}

/* +Client Hacks */
/********************************************/
/*force text to wrap to next line */
.break-word {
  word-break: break-all;
  word-wrap: break-word;
}
/* 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;
}
/*video share module: copy/paste link button height. 44 for 1 line, 64 for wrapping. inline is 54 */
  .copylink-button-size {
    height: 64px!important;
    padding: 6px 20px!important;
  }
/* reminders */
.reminders {height: inherit;}
/* + desktop and mobile adjustments. used with bombproof buttons  */
/*************************/
.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. used with bombproof buttons. */
  .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;}

  /* Bombproof Button half width on mobile, font scaling */
  .button-size {
    font-size: 1.1em !important;
    line-height: 100% !important;
    width: 60%!important;
    height: 60px!important;
    margin: 25px auto !important;
  }
  /*video share module: copy/paste link */
  .copylink-button-size {
    font-size: 1em !important;
    line-height: 100% !important;
    width: 100%!important;
    height: 64px!important;
    margin: 5px auto 10px !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;}
  }
  /* gmail app on iOS */
  @supports (-webkit-overflow-scrolling:touch) and (color:#ffff) {
  /* Bombproof button extends to 100% width */
  div > u ~ div .gmailbutton { width: 100%!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;
}
/* left-right padding on video share copy-link button. Only works with lines that do not wrap. save until I fully update the module. */
.video-copylink-padding {
   display:none !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/fe5c15707c6c007e741d/m/2/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&#37 off" or "free shipping.")
    "@context": "http://schema.org/",
    "@type": "DiscountOffer",
    "description": "40% off party supplies",

    // --- -05:00 specifies EST in Universal time (UTC). -08:00 specifies PST. use 24 hour time format.
    //"availabilityStarts": "2019-04-04T10:00:00-05:00",
    //"availabilityEnds": "2019-04-30T23: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/fe5a15707c6c007a7316/m/2/041519_AGS_party_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. -->

<!--- ++ +++ 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" >
<!-- visible preheader text -->
</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/fe5c15707c6c007e741d/m/33/american-greetings-logo-2018.png" width="217" height="75" alt="American Greetings" border="0" style="display:block;width:217px;" ></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/fe5c15707c6c007e741d/m/33/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/fe5c15707c6c007e741d/m/33/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/fe5c15707c6c007e741d/m/33/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/fe5c15707c6c007e741d/m/33/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/fe5c15707c6c007e741d/m/33/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 -->


<!-- copy-link row -->
<tr>
  <td>
<!-- copy-link promo module -->
<table bgcolor="#00AEBC" class="copylink-module" align="center" border="0" cellpadding="0" cellspacing="0" width="640" style="background-color:#00AEBC;border-collapse:separate;width:640px;"  role="presentation" >
  <!-- headline -->
  <tr>
    <td colspan="3">
      <a href="https://www.americangreetings.com/join/?mkt_off=mkt20&%%=v(@vPersData)=%%" alias="promo-headline" target="_blank">
      <img src="https://image.email.americangreetings.com/lib/fe5c15707c6c007e741d/m/36/052019_AG-WBK_R1.jpg" width="640" alt="Get 20% off your subscription when you use this URL." border="0" style="display:block;width:640px;" ></a>
    </td>
  </tr>
  <!-- copy link row -->
  <tr >
    <td align="left" width="22"><img src="https://image.email.americangreetings.com/lib/fe5c15707c6c007e741d/m/36/spacerB22x40.jpg" alt=" " width="22" border="0" style="display:block;width:22px;" ></td>
    <td align="center" bgcolor="#FFFFFF" class="copy-link" style="color:#484848;font-family:sans-serif;font-size:16px;font-weight:bold; /*height:54px;*/line-height:22px;/*padding:6px 20px;*/text-align:center; text-decoration: none; vertical-align: middle; word-break:break-all;width:596px;">
    <img src="https://image.email.americangreetings.com/lib/fe5a15707c6c007a7316/m/2/spacer596x5.jpg" width="596" alt=" " border="0" style="display:block;width:596px;" >
      <!-- copylink  -->
      <div align="center" class="button-wrapper" style="margin:0 auto;width:580px;">
            <!--[if mso]><span class="video-copylink-padding">  </span><![endif]-->
            <!-- ADD Copy/paste link here -->
            <a href="https://www.americangreetings.com/join/?mkt_off=mkt20&%%=v(@vPersData)=%%" alias="copy-paste-link" style="color:#484848; text-decoration: none; vertical-align: middle; padding: 16px 0; display: block;" target="_blank">
            https://www.americangreetings.com/join/?mkt_off=mkt20
            </a>
            <!--[if mso]><span class="video-copylink-padding">  </span><![endif]-->
      </div>
      <img src="https://image.email.americangreetings.com/lib/fe5a15707c6c007a7316/m/2/spacer596x5.jpg" width="596" alt=" " border="0" style="display:block;width:596px;" >
      <!-- /copy-link -->
    </td>
  <td align="right" width="22"><img src="https://image.email.americangreetings.com/lib/fe5c15707c6c007e741d/m/36/spacerB22x40.jpg" alt=" " width="22" border="0" style="display:block;width:22px;" ></td>
  </tr>
  <tr>
    <td colspan="3"><img src="https://image.email.americangreetings.com/lib/fe5c15707c6c007e741d/m/36/052019_AG-WBK_R2.jpg" alt=" " width="640" border="0" style="display:block;width:640px;" ></td>
  </tr>
</table>
<!-- /copy-link module -->
  </td>
</tr>
<!-- /copy-link row -->

<!-- ++ 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/fe5c15707c6c007e741d/m/34/640-full-width.jpg" alt=" " border="0" style="display:block;width:100%;" align="top" class="full-width-image" style="display:block;" ></a>
  </td>
</tr>

<!-- start - ++ two column row - Scalable -->
<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/fe5c15707c6c007e741d/m/34/320-half-width.jpg" alt=" " width="320" border="0" style="display:block;width:100%;" ></a>
        </td>
        <td>
          <a href="https://www.americangreetings.com/?%%=v(@vPersData)=%%" alias="item2" target="_blank" >
          <img src="https://image.email.americangreetings.com/lib/fe5c15707c6c007e741d/m/34/320-half-width.jpg" alt=" " width="320" border="0" style="display:block;width:100%;" ></a>
        </td>
      </tr>
    </table>
  </td>
</tr>
<!-- end two column row -->

<!-- start - ++ - three column row Scalable -->
<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/fe5c15707c6c007e741d/m/34/2018_AG_213x320_01.jpg" alt=" " width="213" border="0" style="display:block;width:100%;" ></a>
        </td>
        <td>
          <a href="https://www.americangreetings.com?%%=v(@vPersData)=%%" alias="item2" target="_blank" >
          <img src="https://image.email.americangreetings.com/lib/fe5c15707c6c007e741d/m/34/2018_AG_214x320_01.jpg" alt=" " width="214" border="0" style="display:block;width:100%;" ></a>
        </td>
        <td>
          <a href="https://www.americangreetings.com?%%=v(@vPersData)=%%" alias="item3" target="_blank" >
          <img src="https://image.email.americangreetings.com/lib/fe5c15707c6c007e741d/m/34/2018_AG_213x320_01.jpg" alt=" " width="213" border="0" style="display:block;width:100%;" ></a>
        </td>
      </tr>
    </table>
  </td>
</tr>

<!-- video share module: side by side links with text-wrapping. EOA 4/30/2019 -->
<tr>
  <td class="videoWrapper" style="padding:20px 10px;">
    <table class="videoborder" align="center" border="0" cellpadding="0" cellspacing="0" width="620" style="border-collapse:separate;border:2px solid #7D8792;width:620px;"  role="presentation" >
      <!-- headline -->
      <tr style="background-color:#F3F4F6;">
        <td align="left" valign="top">
          <img src="https://image.email.americangreetings.com/lib/fe5c15707c6c007e741d/m/35/AG-vidshareT.jpg" width="615" alt="Copy and paste the following link to share this video." border="0" style="display:block;width:615px;" >
        </td>
      </tr>
      <!-- share links row -->
      <tr><td valign="top" align="left" style="padding-bottom:16px;">
      <table class="share-video" align="left" border="0" cellpadding="0" cellspacing="0" width="615" style="width:615px;" role="presentation" >
        <tr>
          <!-- left spacing -->
          <td valign="top" align="left"><img src="https://image.email.americangreetings.com/lib/fe5c15707c6c007e741d/m/35/spacer30x10.jpg" alt=" " width="30" border="0" style="display:block;width:30px;" ></td>
          <!-- share video: copy-paste -->
          <td align="left" valign="top">
          <img src="https://image.email.americangreetings.com/lib/fe5c15707c6c007e741d/m/35/AG-vidshareLink.jpg" width="403" alt="Link:" border="0" style="display:block;width:403px;" >
            <!-- copylink Button - copy/paste link to share video -->
            <div align="left" class="button-wrapper" style="margin:0;width:360px;">
            <table align="center" bgcolor="#F3F4F6" border="0" cellpadding="0" cellspacing="0" class="copylink-button-size break-word" style="border-radius:0;width:360px;" role="presentation" >
              <tr>
                <td align="left" bgcolor="#F3F4F6" class="copylink-button-size gmailbutton" style="border: 1px solid #7D8792; border-radius: 8;color: #7D8792;font-family:sans-serif;font-size:16px;font-weight:bold; height:64px;line-height:22px;padding:6px 20px;text-align:left; text-decoration: none; vertical-align: middle; word-break:break-all;">
                  <!--[if mso]><span class="video-copylink-padding">  </span><![endif]-->
                  <!-- ADD Copy/paste link here -->
                  <a href="https://www.americangreetings.com/inspiration/mothers-day-ideas?%%=v(@vPersData)=%%" alias="copy-paste-link" style="color: #7D8792 text-decoration: none; vertical-align: middle; padding: 16px 0; display: block;" target="_blank">https://www.americangreetings.com/inspiration/mothers-day-ideas</a>
                  <!--[if mso]><span class="video-copylink-padding">  </span><![endif]-->
                </td>
              </tr>
              </table>
            </div>
            <!-- /Button -->
          </td>
          <!-- /copy-paste vid link -->
          <!-- share-video fb - twitter - pinterest -->
          <td align="left" valign="top">
           <table class="share-video" align="left" border="0" cellpadding="0" cellspacing="0" width="182" style="width:182px;" role="presentation" >
             <tr>
               <td align="left" colspan="3" valign="top">
               <img src="https://image.email.americangreetings.com/lib/fe5c15707c6c007e741d/m/35/AG-vidshareSocial.jpg" width="182" alt="Social:" border="0" style="display:block;width:182px;" >
               </td>
             </tr>
             <tr>
               <td><!-- share to facebook -->
                 <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.americangreetings.com%2Finspiration%2Fmothers-day-ideas&src=sdkpreparse&%%=v(@vPersData)=%%" alias="shareVidFB" target="_blank" >
                 <img src="https://image.email.americangreetings.com/lib/fe5c15707c6c007e741d/m/35/AG-vidshare-FB.jpg" alt="Share on Facebook" height="60" width="60" border="0" style="display:block;width:60px;" ></a>
               </td>
               <td><!-- share to Twitter -->
                 <a href="https://twitter.com/home?status=https%3A//www.americangreetings.com/inspiration/mothers-day-ideas&%%=v(@vPersData)=%%" alias="shareVid-Twitter" target="_blank" >
                 <img src="https://image.email.americangreetings.com/lib/fe5c15707c6c007e741d/m/35/AG-vidshare-Twitter.jpg" alt="Share on Twitter" height="60" width="60" border="0" style="display:block;width:60px;" ></a>
               </td>
               <td><!-- share to Pinterest (needs also the url for the image to be shared if not youtube video)-->
                 <a href="https://pinterest.com/pin/create/button/?url=https%3A//www.americangreetings.com/inspiration/mothers-day-ideas&media=http%3A//image.email.americangreetings.com/lib/fe5c15707c6c007e741d/m/35/042019_AG_ShareVid_H.jpg&description=&%%=v(@vPersData)=%%" alias="shareVidPinterest" target="_blank" >
                 <img src="https://image.email.americangreetings.com/lib/fe5c15707c6c007e741d/m/35/AG-vidshare-Pin.jpg" alt="Share on Pinterest" height="60" width="62" border="0" style="display:block;width:62px;" ></a>
               </td>
             </tr>
           </table>
          </td>
          <!-- /share-video fb - twitter - pinterest -->
        </tr>
     </table>
      <!-- /side-by-side -->
    </td>
  </tr>
<tr><td><img src="https://image.email.americangreetings.com/lib/fe5c15707c6c007e741d/m/35/spacer-620x2.gif" alt=" " width="620" border="0" style="display:block;width:620px;" ></td></tr>
      <!-- close video share wrapper -->
    </table>
  </td>
</tr>
<!-- /video share wrapper -->
<!-- /video share module: side by side links with text wrapping. EOA -->

<!-- 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/%%=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/?%%=v(@vPersData)=%%" alias="subheadline" style="color:#333333; text-decoration:none;" target="_blank" >
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </a>
      </h2>
      <!-- AG Bombproof Button - survey  -->
      <div class="button-wrapper" style="margin:20px auto 30px;">
        <table align="center" bgcolor="#333333" border="0" cellpadding="0" cellspacing="0" class="button-size" style="border-radius:0;" role="presentation">
        <tr>
          <td bgcolor="#333333" class="hideOnMobile" style="border-top-left-radius: 0; border-bottom-left-radius: 0;" width="8"></td>
          <td align="center" bgcolor="#333333" class="button-size gmailbutton" style="font-family: sans-serif;font-size:18px;font-weight:bold;line-height:22px;color: #ffffff; text-decoration: none; vertical-align: middle; height:44px; border-radius: 0;">
            <a href="https://www.americangreetings.com/?%%=v(@vPersData)=%%" alias="button" style="color: #ffffff; text-decoration: none; vertical-align: middle; letter-spacing: 1px; padding: 10px 52px; border: 1px solid #333333; border-radius: 20px; display: block;" target="_blank">
            <!--[if mso]>   <![endif]-->
            <span>Visit American Greetings</span>
            <!--[if mso]>   <![endif]-->
            </a>
          </td>
          <td bgcolor="#333333" class="hideOnMobile" style="border-top-right-radius: 0; border-bottom-right-radius: 0;" width="8"></td>
        </tr>
        </table>
      </div>
      <!-- /Bombproof Button -->
    <!-- close 600px wide text area wrapper -->
    </div><!-- end text-container-->
  </td>
</tr>
 <!-- end 600px wide text area wrapper -->

  <!-- ++ 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/fe5c15707c6c007e741d/m/34/2018-AG-Signature.png" alt="Your Friends at American Greetings" border="0" style="display:block;width:100%;" align="top" class="full-width-image" style="display:block;" ></a>
   </td>
  </tr>
  <!-- end: centered image signature -->


<!-- ++ do not delete! close  #main content table   -->
</table>
<!-- end 640 main content table  -->

  <!-- +++ start default shop foot nav  sfmc2-->
  <table class="foot-nav-wrapper" border="0" cellpadding="0" cellspacing="0" align="center" width="640" style="margin: 0 auto;" role="presentation" >
    <!-- optional spacing -->
    <tr>
      <td  class="spacer-20"><img src="https://image.email.americangreetings.com/lib/fe5c15707c6c007e741d/m/34/spacer20x20.gif" width="20" height="20" style="max-height:20px;"></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 greeting cards
              </a>
              </td>
            </tr>
            <tr>
              <td  class="spacer-20"><img src="https://image.email.americangreetings.com/lib/fe5c15707c6c007e741d/m/34/spacer20x20.gif" width="20" height="20" style="max-height:20px;"></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/fe5c15707c6c007e741d/m/34/spacer20x20.gif" width="20" height="20" style="max-height:20px;"></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/fe5c15707c6c007e741d/m/34/spacer20x20.gif" width="20" height="20" style="max-height:20px;"></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/fe5c15707c6c007e741d/m/34/spacer20x20.gif" width="20" height="20" style="max-height:20px;"></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" >
              *Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              </a>
              </td>
            </tr>
            <tr>
              <td  class="spacer-20"><img src="https://image.email.americangreetings.com/lib/fe5c15707c6c007e741d/m/34/spacer20x20.gif" width="20" height="20" style="max-height:20px;"></td>
            </tr>

  <!-- close shop foot nav -->
  </table>
  <!-- end shop foot nav -->

    <!-- begin +SocialFollow 640 -sfmc2 -->
    <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;width:100%"  border="0" alt="" src="https://image.email.americangreetings.com/lib/fe5c15707c6c007e741d/m/36/2017-AG-soc-spacer80x78.png" width="80"></td>
         <td>
           <a href="https://www.facebook.com/AmericanGreetings?%%=v(@vPersData)=%%" alias="Facebook" target="_blank" >
             <img style="display:block;width:100%" border="0" alt="follow us on facebook" src="https://image.email.americangreetings.com/lib/fe5c15707c6c007e741d/m/33/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;width:100%" border="0" alt="follow us on twitter" src="https://image.email.americangreetings.com/lib/fe5c15707c6c007e741d/m/33/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;width:100%" border="0" alt="follow us on pinterest" src="https://image.email.americangreetings.com/lib/fe5c15707c6c007e741d/m/33/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;width:100%" border="0" alt="follow us on instagram" src="https://image.email.americangreetings.com/lib/fe5c15707c6c007e741d/m/33/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;width:100%" border="0" alt="visit our blog" src="https://image.email.americangreetings.com/lib/fe5c15707c6c007e741d/m/33/2017-AG-blog.png" width="78"></a></td>
        <td class="hideOnMobile"  ><img style="display:block;width:100%"  border="0" alt="" src="https://image.email.americangreetings.com/lib/fe5c15707c6c007e741d/m/36/2017-AG-soc-spacer125x78.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>
Last modified: July 26, 2019