HTML Snippets
Base Table
<table align="center" border="0" cellspacing="0" cellpadding="0" role="presentation" style="border-collapse:collapse;" width="100%">
<tbody>
<tr>
<td align="center" style="padding:0px;margin:0px;font-size:0px;mso-line-height-rule:exactly;line-height:0px;">
<!-- INSERT CODE HERE -->
</td>
</tr>
</tbody>
</table>
2Col Table
<table align="center" border="0" cellspacing="0" cellpadding="0" role="presentation" style="border-collapse:collapse;" width="100%">
<tbody>
<tr>
<th align="center" class="container" style="" valign="top" width="50%">
<table align="center" border="0" cellspacing="0" cellpadding="0" role="presentation" style="border-collapse:collapse;" width="100%">
<tbody>
<tr>
<td align="center" style="padding:0px;margin:0px;font-size:0px;mso-line-height-rule:exactly;line-height:0px;">
<!-- INSERT CODE HERE -->
</td>
</tr>
</tbody>
</table>
</th>
<th align="center" class="container" style="" valign="top" width="50%">
<table align="center" border="0" cellspacing="0" cellpadding="0" role="presentation" style="border-collapse:collapse;" width="100%">
<tbody>
<tr>
<td align="center" style="padding:0px;margin:0px;font-size:0px;mso-line-height-rule:exactly;line-height:0px;">
<!-- INSERT CODE HERE -->
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
3Col Table
<table align="center" border="0" cellspacing="0" cellpadding="0" role="presentation" style="border-collapse:collapse;" width="100%">
<tbody>
<tr>
<th align="center" class="container" style="" valign="top" width="33%">
<table align="center" border="0" cellspacing="0" cellpadding="0" role="presentation" style="border-collapse:collapse;" width="100%">
<tbody>
<tr>
<td align="center" style="padding:0px;margin:0px;font-size:0px;mso-line-height-rule:exactly;line-height:0px;">
<!-- INSERT CODE HERE -->
</td>
</tr>
</tbody>
</table>
</th>
<th align="center" class="container" style="" valign="top" width="33%">
<table align="center" border="0" cellspacing="0" cellpadding="0" role="presentation" style="border-collapse:collapse;" width="100%">
<tbody>
<tr>
<td align="center" style="padding:0px;margin:0px;font-size:0px;mso-line-height-rule:exactly;line-height:0px;">
<!-- INSERT CODE HERE -->
</td>
</tr>
</tbody>
</table>
</th>
<th align="center" class="container" style="" valign="top" width="33%">
<table align="center" border="0" cellspacing="0" cellpadding="0" role="presentation" style="border-collapse:collapse;" width="100%">
<tbody>
<tr>
<td align="center" style="padding:0px;margin:0px;font-size:0px;mso-line-height-rule:exactly;line-height:0px;">
<!-- INSERT CODE HERE -->
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
Bulleted List
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;" role="presentation">
<tbody>
<tr>
<td align="left" width="10" style="" valign="top">
<p style="">•</p>
</td>
<td align="left" style="" valign="top">
<p style="">
Lorem ipsum
</p>
</td>
</tr>
<tr>
<td height="5" style="height:5px;font-size:1px;mso-line-height-rule:exactly;line-height:1px;" colspan="2"> </td>
</tr>
</tbody>
</table>
CTA/BTN Snippets
BTN Pri-ENG
<table role="none" cellpadding="0" cellspacing="0" border="0" width="230" height="44" style="width:230px;height:44px;border-radius: 3px;background:#006fcf;" class="button-primary-light">
<tr>
<td align="center" valign="middle">
<table role="none" cellpadding="0" cellspacing="0" border="0" style="border-radius: 3px; border: 2px solid #006fcf;mso-border-alt: 2px solid #006fcf;width:228px;height:42px">
<tr>
<td align="center" valign="middle" height="44">
<a href="https://www.americanexpress.com" target="_blank" aria-label="Section CTA Link, opens a new tab" style="color: #FFFFFF; display: inline-block; padding: 12px 0; text-decoration: none; width: 230px; font-size: 15px; line-height: 22px;">
Section CTA Link
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
BTN Sec-ENG
<table role="none" cellpadding="0" cellspacing="0" border="0" width="230" height="44" style="width:230px;height:44px;border-radius: 3px;" class="button-secondary-light">
<tr>
<td align="center" valign="middle">
<table role="none" cellpadding="0" cellspacing="0" border="0" style="border-radius: 3px; border: 2px solid #006FCF;mso-border-alt: 2px solid #006FCF;width:228px;height:42px" class="full-width">
<tr>
<td align="center" valign="middle" height="44">
<a href="https://www.americanexpress.com" target="_blank" aria-label="Section CTA Link, opens a new tab" style="color: #006FCF; display: inline-block; padding: 12px 0; text-decoration: none; width: 230px; font-size: 15px; line-height: 22px;">
Section CTA Link
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
BTN Pri-FR
<table role="none" cellpadding="0" cellspacing="0" border="0" width="230" height="44" style="width:230px;height:44px;border-radius: 3px;background:#006fcf;" class="button-primary-light">
<tr>
<td align="center" valign="middle">
<table role="none" cellpadding="0" cellspacing="0" border="0" style="border-radius: 3px; border: 2px solid #006fcf;mso-border-alt: 2px solid #006fcf;width:228px;height:42px">
<tr>
<td align="center" valign="middle" height="44">
<a href="https://www.americanexpress.com/fr" target="_blank" aria-label="Section CTA Link ouvre un nouvel onglet" style="color: #FFFFFF; display: inline-block; padding: 12px 0; text-decoration: none; width: 230px; font-size: 15px; line-height: 22px;">
Section CTA Link
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
BTN Sec-FR
<table role="none" cellpadding="0" cellspacing="0" border="0" width="230" height="44" style="width:230px;height:44px;border-radius: 3px;" class="button-secondary-light">
<tr>
<td align="center" valign="middle">
<table role="none" cellpadding="0" cellspacing="0" border="0" style="border-radius: 3px; border: 2px solid #006FCF;mso-border-alt: 2px solid #006FCF;width:228px;height:42px" class="full-width">
<tr>
<td align="center" valign="middle" height="44">
<a href="https://www.americanexpress.com/fr" target="_blank" aria-label="Section CTA Link ouvre un nouvel onglet" style="color: #006FCF; display: inline-block; padding: 12px 0; text-decoration: none; width: 230px; font-size: 15px; line-height: 22px;">
Section CTA Link
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
MSO Conversion
Code
MSO BG
<!-- ADD TO CUSTOMS STYLES SECTION OF TEMPLATE CSS -->
<style>
@media only screen and (max-width: 619px) {
.mobBG01 {background-image: url('https://i.email.americanexpress.com/wpm/1288/Images/XXX') !important;background-size:cover !important;background-position: top center !important;background-repeat: no-repeat;}
}
</style>
<table role="presentation" width="620" border="0" cellspacing="0" cellpadding="0" style="width:620px;" class="container">
<tr>
<td align="center" valign="middle" class="mobBG01" bgcolor="#000000" background="https://i.email.americanexpress.com/wpm/1288/Images/XXX" height="" style="background-image:url(https://i.email.americanexpress.com/wpm/1288/Images/XXX);background-repeat:no-repeat;background-size:cover;background-position:bottom center;">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" style="width:465pt; height:XXXpt;" src="https://i.email.americanexpress.com/wpm/1288/Images/XXX"/>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="false" stroke="false" style="position: relative; width:465pt; height:XXXpt; top: 0pt; left: 0pt;">
<v:fill opacity="0%" color="#000000" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<div style="font-size: 0;">
<table role="presentation" width="620" border="0" cellspacing="0" cellpadding="0" style="width:620px;" class="container">
<tbody>
<tr>
<td align="center" valign="top">
<!-- INSERT CONTENT HERE -->
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
</v:image>
<![endif]-->
</td>
</tr>
</table>
Convert Px
Copy Pts
{{pts}}
Image Paths
Testing imgPathhttps://imgs.notionstudios.ca/
INTL Adhoc (1288)https://i.email.americanexpress.com/wpm/1288/Images/
API Trigger (1289)https://i.email.americanexpress.com/wpm/1289/Images/
Merchant (1290)https://i.email.americanexpress.com/wpm/1290/Images/
Bulk Trigger (1291)https://i.email.americanexpress.com/wpm/1291/Images/
TPGimages/
Dev Tools
Non-Break Hyphen‑
Hidden Space​
Zero Width​
Tab Space	
Text Link<a href="###" target="_blank" style="color:#005DAE;text-decoration:underline;"><span style="text-decoration:underline;">Insert text link here</span></a>
NonBlue Ph.#<a href="tel:" style="color:#53565A;text-decoration:none;font-weight:normal;" target="_blank">Prevents Ph.# turning blue</a>
Preheader
EN-Preheader
BrandPanel
EN-BrandPanel
EN-BrandPanel-Crd
EN-BrandPanel-MR
EN-BrandPanel-ProgramAdmin_PA
EN-BrandPanel-Merchant-Prop
EN-BrandPanel-Merchant-OptBlue
CrossSellDivider
EN-CrossSellDivider-GetMore
QuickLinks
EN-QuickLinks-MarketingConsumer
EN-QuickLinks-MarketingSBS
EN-QuickLinks-ProgramAdmin_PA
EN-QuickLinks-CorpCM
EN-QuickLinks-MR-Consumer_SBS
EN-QuickLinks-MR-ATO
EN-QuickLinks-MR-Corp
EN-QuickLinks-Paperless
EN-QuickLinks-Experiences
EN-QuickLinks-OnlineTravel
VOC_Adhoc
EN-VOC_Adhoc-White
EN-VOC_Adhoc-Grey
EN-VOC_Adhoc-BrightBlue
VOC_Trigger
EN-VOC_Trigger-White
EN-VOC_Trigger-Grey
EN-VOC_Trigger-BrightBlue
LegalLinks
EN-LegalLinks
EN-LegalLinks-Servicing
EN-LegalLinks-ProgramAdmin_PA
EN-LegalLinks-Merchant_Prop
EN-LegalLinks-Merchant_OptBlue
Legal
EN-Legal-Consumer_SBS_Corp_MerchantProp
EN-Legal-MerchantOptBlue
EN-Legal-Servicing
