Skip to content

Instantly share code, notes, and snippets.

@LAMike310

LAMike310/gist:303f7add9dc7f8530f89

Created July 23, 2014 01:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save LAMike310/303f7add9dc7f8530f89 to your computer and use it in GitHub Desktop.
Save LAMike310/303f7add9dc7f8530f89 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bank of America</title>
<style type="text/css">
/*Hotmail/Outlook.com Styles*/
.ExternalClass * {
line-height: 105% !important;
}
.ExternalClass div.footer_disclosures {
line-height: 12px !important;
}
.ExternalClass h1 {
font-weight: bold;
}
</style>
<style type="text/css">
/* Begin: Mobile Media Query */
/* Development - Delete right before delivery */
@media screen and (max-width: 551px), (-webkit-device-pixel-ratio: 2), (-webkit-device-pixel-ratio: 3) {
/* Production - Enable right before delivery
@media screen and (max-device-width: 551px), (-webkit-device-pixel-ratio: 2), (-webkit-device-pixel-ratio: 3) {
*/
/* Begin: General Header Formatting. Note: Include in all emails ============================================ */
body {
margin: 0 !important;
padding: 0 !important;
}
table[id=page_bgcolor] {
width: 100% !important;
margin: 0 !important; /*bgcolor = white */
/*margin: 0 10px 0 10px !important; bgcolor =/= white */
}
td[class=main_body_wrapper] {
padding: 0 10px 0 10px !important;
}
table[id=main_body] {
width: 100% !important;
}
table[id=body_content] {
width: 100% !important;
}
/* Header */
table[id=header_preheader_baclogo] {
width: 100% !important;
margin-bottom: 15px !important;
}
table[id=boa_logo] {
width: 142px !important;
margin-left: 18px !important;
}
img[class=boa_logo] {
/* Default BAC logo size is medium for full HD screens */
width: 142px !important;
height: 19px !important;
}
table[id=preheader] {
width: 100% !important;
}
td[class=preheader_spacer] {
height: 7px !important;
}
/* ******************************************** */
/* Headline CTAs */
/* For most main modules: */
table[id=CTA_text] {
margin-top: 10px;
display: block !important;
}
table[id=CTA_button_flat] {
width: 100% !important; /* 264px */
margin: 24px auto 0 auto !important;
}
td[class=CTA_button_flat_td] {
width: 100% !important;
height: 30px !important;
}
td[class=CTA_button_flat_td] a {
padding: auto !important;
line-height: 40px !important;
width: 100% !important;
}
/* ******************************************** */
/* Body Content */
td[class=middle_content_wrapper], table[id=middle_content_sideborders], table[id=middle_content_modules] {
width: 100% !important;
}
/* End: General Header Formatting ============================================ */
/* Begin: Main Module Styles. Pick only one. ============================================ */
/* ******************************************** */
/* Headline Text */
/* Begin: D:MM1-CCB1. M:MM1b-CCB1. */
table[id=D_MM1-CCB1__M_MM1b-CCB1] td[class=headline_cta_wrapper] {
padding: 26px 17px 26px 17px !important;
width: 100% !important;
}
table[id=D_MM1-CCB1__M_MM1b-CCB1] table[id=headline_cta] {
width: 100% !important;
}
table[id=D_MM1-CCB1__M_MM1b-CCB1] a[class=cta_text] {
width: 100% !important;
line-height: 16px !important;
background-color:#ffffff !important;
display: block !important;
padding: 10px 0 10px 0 !important;
}
/* End: D:MM1-CCB1. M:MM1b-CCB1. */
/* ******************************************** */
/* Headline Text */
/* Begin: D_MM17-CCB1__M_MM17-CCB1 */
table[id=D_MM17-CCB1__M_MM17-CCB1] td[class=headline_cta_wrapper] {
padding: 26px 17px 26px 17px !important;
}
table[id=D_MM17-CCB1__M_MM17-CCB1] table[id=headline_cta] {
width: 100% !important;
}
table[id=D_MM17-CCB1__M_MM17-CCB1] span[class=headline_text] {
font-size: 0.9em !important;
}
table[id=D_MM17-CCB1__M_MM17-CCB1] span[class=fontResize_subhead] {
font-size: 1.0em;
}
table[id=D_MM17-CCB1__M_MM17-CCB1] a[class=cta_text] {
width: 100% !important;
line-height: 16px !important;
background-color:#ffffff !important;
display: block !important;
padding: 10px 0 10px 0 !important;
}
/* End: D_MM17-CCB1__M_MM17-CCB1 */
/* ******************************************** */
/* Headline Text */
/* Begin: D:MM17-CCB4. M:MM17-CCB4. */
table[id=D_MM17-CCB4__M_MM17-CCB4] td[class=headline_cta_wrapper] {
padding: 26px 17px 26px 17px !important;
}
table[id=D_MM17-CCB4__M_MM17-CCB4] table[id=headline_cta] {
width: 100% !important;
}
table[id=D_MM17-CCB4__M_MM17-CCB4] span[class=headline_text] {
font-size: 0.9em !important;
}
table[id=D_MM17-CCB4__M_MM17-CCB4] span[class=fontResize_subhead] {
font-size: 1.0em;
}
table[id=D_MM17-CCB4__M_MM17-CCB4] span[class=fontResize_CTA_text] {
font-size: 1.0em;
}
table[id=D_MM17-CCB4__M_MM17-CCB4] a[class=cta_text] {
width: 100% !important;
line-height: 16px !important;
background-color:#ffffff !important;
display: block !important;
padding: 10px 0 10px 0 !important;
}
table[id=D_MM17-CCB4__M_MM17-CCB4] td[class=stackable_wrapper] table[id=CTA_text] {
width: 100% !important;
}
/* End: D:MM17-CCB4. M:MM17-CCB4. */
/* ******************************************** */
/* Headline Text */
/* Begin: D:MM17-CCB6. M:MM17-CCB4. */
/* No icon in mobile */
table[id=D_MM17-CCB6__M_MM17-CCB4] td[class=headline_cta_wrapper] {
padding: 26px 17px 26px 17px !important;
}
table[id=D_MM17-CCB6__M_MM17-CCB4] table[id=headline_cta] {
width: 100% !important;
}
table[id=D_MM17-CCB6__M_MM17-CCB4] span[class=headline_text] {
font-size: 0.9em !important;
}
table[id=D_MM17-CCB6__M_MM17-CCB4] span[class=fontResize_subhead] {
font-size: 1.0em;
}
table[id=D_MM17-CCB6__M_MM17-CCB4] span[class=fontResize_CTA_text] {
font-size: 1.0em;
}
table[id=D_MM17-CCB6__M_MM17-CCB4] a[class=cta_text] {
width: 100% !important;
line-height: 16px !important;
background-color:#ffffff !important;
display: block !important;
padding: 10px 0 10px 0 !important;
}
/* End: D:MM17-CCB6. M:MM17-CCB4. */
/* ******************************************** */
/* Headline Text */
/* Begin: D:MM17-CCB6. M:MM17-CCB6. */
table[id=D_MM17-CCB6__M_MM17-CCB6] td[class=headline_cta_wrapper] {
padding: 26px 17px 26px 17px !important;
}
table[id=D_MM17-CCB6__M_MM17-CCB6] table[id=headline_cta] {
width: 100% !important;
}
table[id=D_MM17-CCB6__M_MM17-CCB6] span[class=headline_text] {
font-size: 0.9em !important;
}
table[id=D_MM17-CCB6__M_MM17-CCB6] span[class=fontResize_subhead] {
font-size: 1.0em;
}
table[id=D_MM17-CCB6__M_MM17-CCB6] span[class=fontResize_CTA_text] {
font-size: 1.0em;
}
table[id=D_MM17-CCB6__M_MM17-CCB6] td[class=image_left] {
width: 45px !important;
padding-right: 10px !important;
}
table[id=D_MM17-CCB6__M_MM17-CCB6] a[class=cta_text] {
width: 100% !important;
line-height: 16px !important;
background-color:#ffffff !important;
display: block !important;
padding: 10px 0 10px 0 !important;
}
table[id=D_MM17-CCB6__M_MM17-CCB6] table[id=CTA_text] {
width: 100% !important;
}
/* End: D:MM17-CCB6. M:MM17-CCB6. */
/* ********************************************** */
/* Headline Text */
/* Begin: D_MM19-CCB1__M_MM19-CCB1 */
table[id=D_MM19-CCB1__M_MM19-CCB1] td[class=headline_cta_wrapper] {
padding: 26px 17px 26px 17px !important;
}
table[id=D_MM19-CCB1__M_MM19-CCB1] table[id=headline_cta] {
width: 100% !important;
}
table[id=D_MM19-CCB1__M_MM19-CCB1] span[class=headline_text] {
font-size: 0.9em !important;
}
table[id=D_MM19-CCB1__M_MM19-CCB1] span[class=fontResize_subhead] {
font-size: 1.0em;
}
table[id=D_MM19-CCB1__M_MM19-CCB1] a[class=cta_text] {
width: 100% !important;
line-height: 16px !important;
background-color:#ffffff !important;
display: block !important;
padding: 10px 0 10px 0 !important;
}
/* End: D_MM19-CCB1__M_MM19-CCB1 */
/* ******************************************** */
/* Headline Text */
/* Begin: D:MM19-CCB8. M:MM19-CCB8. */
table[id=D_MM19-CCB8__M_MM19-CCB8] td[class=headline_cta_wrapper] {
padding: 26px 17px 26px 17px !important;
}
table[id=D_MM19-CCB8__M_MM19-CCB8] table[id=headline_cta] {
width: 100% !important;
}
table[id=D_MM19-CCB8__M_MM19-CCB8] span[class=headline_text] {
font-size: 0.9em !important;
}
table[id=D_MM19-CCB8__M_MM19-CCB8] span[class=fontResize_subhead] {
font-size: 1.0em;
}
/* End: D:MM19-CCB8. M:MM19-CCB8. */
/* ******************************************** */
/* Headline Text */
/* Begin: D:MM20. M:MM20. */
table[id=D_MM20__M_MM20] td[class=headline_cta_wrapper] {
padding: 26px 17px 26px 17px !important;
}
table[id=D_MM20__M_MM20] table[id=headline_cta] {
width: 100% !important;
}
table[id=D_MM20__M_MM20] span[class=headline_text] {
font-size: 0.9em !important;
}
table[id=D_MM20__M_MM20] span[class=fontResize_subhead] {
font-size: 1.0em;
}
/* End: D:MM20. M:MM20. */
/* ******************************************** */
/* Headline Text */
/* Begin: D_MM21-CCB1__M_MM21b-CCB1 */
table[id=D_MM21-CCB1__M_MM21b-CCB1] td[class=headline_cta_wrapper] {
padding: 26px 17px 26px 17px !important;
}
table[id=D_MM21-CCB1__M_MM21b-CCB1] table[id=headline_cta] {
width: 100% !important;
}
table[id=D_MM21-CCB1__M_MM21b-CCB1] span[class=headline_text] {
font-size: 0.9em !important;
}
table[id=D_MM21-CCB1__M_MM21b-CCB1] span[class=fontResize_subhead] {
font-size: 1.0em;
}
table[id=D_MM21-CCB1__M_MM21b-CCB1] a[class=cta_text] {
width: 100% !important;
line-height: 16px !important;
background-color:#ffffff !important;
display: block !important;
padding: 10px 0 10px 0 !important;
}
/* End: D_MM21-CCB1__M_MM21b-CCB1 */
/* End: Main Module Styles. Pick only one. ============================================ */
/* Begin: Module Option Styles. Can use more than one. ============================================ */
/* Module Option */
/* Begin: D_MO1__M_MO1a */
table[class=D_MO1__M_MO1a] {
width: 100% !important;
padding: 0 0 20px 0 !important;
}
table[class=D_MO1__M_MO1a_text] {
padding: 26px 17px 20px 26px !important;
width: 100% !important;
}
table[class=D_MO1__M_MO1a] td[class=side_image_wrapper] {
background: url(http://placehold.it/100x250) no-repeat; /* Different image from desktop. Note: adjust height as needed to accomodate copy length. */
width:100px !important;
}
table[class=D_MO1__M_MO1a] td[class=side_image_wrapper_disabled] { /* If using this class, change class name to side_image_wrapper */
background: url(http://placehold.it/183x190) no-repeat; /* Same image as desktop. Place same desktop image src URL path here. */
background-size: 100px 103px; /* Resize image proportionally */
/* background-position:center; /* and/or reposition as needed*/
width:100px !important;
}
/* Nested span to enable clickable image */
span[class=D_MO1__M_MO1a_image] {
width: 100px;
min-height: 190px; /* Adjust height as needed */
display: block;
}
/* End: D_MO1__M_MO1a */
/* ********************************************** */
/* Module Option */
/* Begin: D_MO1__M_MO1b */
table[class=D_MO1__M_MO1b] {
width: 100% !important;
padding: 0 !important;
}
table[class=D_MO1__M_MO1b_text] {
padding: 26px 17px 20px 17px !important;
width: 100% !important;
}
/* End: D_MO1__M_MO1b */
/* ********************************************** */
/* Module Option */
/* Begin: D_MO1__M_MO1c */
table[class=D_MO1__M_MO1c] {
width: 100% !important;
padding: 0 0 20px 0 !important;
}
table[class=D_MO1__M_MO1c_text] {
padding: 26px 17px 20px 17px !important;
width: 100% !important;
}
div[class="D_MO1__M_MO1c_mimage"] {
width: 68px;
height: 64px;
background: url(http://placehold.it/68x64) no-repeat;
clear: both;
display: block;
margin-bottom: 10px !important;
}
/* End: D_MO1__M_MO1c */
/* ********************************************** */
/* Module Option */
/* Begin: D_MO2__M_MO2a */
table[class=D_MO2__M_MO2a] {
width: 100% !important;
padding: 26px 0 20px 17px !important;
}
table[class=D_MO2__M_MO2a_text] { padding-right:26px !important; width: 100% !important; }
table[class=D_MO2__M_MO2a] td[class=side_image_wrapper] {
background: url(http://placehold.it/100x190) no-repeat; /* Different image from desktop */
width:100px !important;
}
table[class=D_MO2__M_MO2a] td[class=side_image_wrapper_disabled] { /* If using this class, change class name to side_image_wrapper */
background: url(http://placehold.it/183x190) no-repeat; /* Same image as desktop. Place same desktop image src URL path here. */
background-size: 100px 103px; /* Resize image proportionally */
/* background-position:center; /* and/or reposition */
width:100px !important;
}
/* Nested div to enable clickable image */
span[class=D_MO2__M_MO2a_image] {
width: 100px;
min-height: 190px; /* Adjust height as needed */
display:block;
}
/* End: D_MO2__M_MO2a */
/* ********************************************** */
/* Module Option */
/* Begin: D_MO2__M_MO2b */
table[class=D_MO2__M_MO2b] {
width: 100% !important;
}
table[class=D_MO2__M_MO2b_text] {
width: 100% !important;
padding: 26px 17px 20px 17px !important;
}
/* End: D_MO2__M_MO2b */
/* ********************************************** */
/* Module Option */
/* Begin: D_MO3__M_MO3 */
table[class=D_MO3__M_MO3] {
width: 100% !important;
/* Padding with keyline separators and same bg color for each submodule */
padding: 26px 17px 17px 17px !important;
/* Padding without keyline separators and different bg color for each submodule
padding: 0 !important;*/
}
table[class=D_MO3__M_MO3_subm1], table[class=D_MO3__M_MO3_subm2], table[class=D_MO3__M_MO3_subm3] {
width: 100% !important;
/* Submodule padding with keyline separators and same bg color for each submodule */
padding: 26px 0 17px 0 !important;
/* Submodule padding without keyline separators and different bg color for each submodule
padding: 26px 17px 17px 17px !important;*/
}
table[class=D_MO3__M_MO3_subm2] {
border-top: 1px solid #cfcdce !important;
border-bottom: 1px solid #cfcdce !important;
border-left: none !important;
border-right: none !important;
}
table[class=D_MO3__M_MO3] td[class=element_stack] {
border-left: none !important;
border-right: none !important;
float: left !important;
clear: both !important;
}
table[class=D_MO3__M_MO3_subm2] td[class=subm2_middle] {
border-top: 1px solid #cfcdce !important;
border-bottom: 1px solid #cfcdce !important;
}
/* End: D_MO3__M_MO3 */
/* ********************************************** */
/* Module Option */
/* Begin: D_MO4__M_MO4a */
table[class=D_MO4__M_MO4a] {
width: 100% !important;
padding: 0 !important;
}
table[class=D_MO4__M_MO4a_subm1], table[class=D_MO4__M_MO4a_subm2], table[class=D_MO4__M_MO4a_subm3] {
width: 100% !important;
padding: 0;
}
td[class=D_MO4__M_MO4a_subm1_text], td[class=D_MO4__M_MO4a_subm2_text], td[class=D_MO4__M_MO4a_subm3_text] {
padding: 26px 17px 20px 17px !important;
}
td[class=D_MO4__M_MO4a_subm1_image], td[class=D_MO4__M_MO4a_subm2_image], td[class=D_MO4__M_MO4a_subm3_image] {
background: url(http://placehold.it/300x91) no-repeat;
height: 91px;
}
/* End: D_MO4__M_MO4a */
/* ********************************************** */
/* Module Option */
/* Begin: D_MO4__M_MO4b */
table[class=D_MO4__M_MO4b] {
width: 100% !important;
padding: 0 !important;
}
table[class=D_MO4__M_MO4b_subm1], table[class=D_MO4__M_MO4b_subm2], table[class=D_MO4__M_MO4b_subm3] {
width: 100% !important;
padding: 0;
}
td[class=D_MO4__M_MO4b_subm1_text], td[class=D_MO4__M_MO4b_subm2_text], td[class=D_MO4__M_MO4b_subm3_text] {
padding: 26px 17px 20px 17px !important;
}
/* End: D_MO4__M_MO4b */
/* ********************************************** */
/* Module Option */
/* Begin: D_MO5__M_MO5 */
table[class=D_MO5__M_MO5] {
width: 100% !important;
padding: 26px 17px 20px 17px !important;
}
/* End: D_MO5__M_MO5 */
/* ********************************************** */
/* Module Option */
/* Begin: D_MO10__M_MO10a */
table[class=D_MO10__M_MO10a] {
width: 100% !important;
padding: 26px 0 20px 17px !important;
}
table[class=D_MO10__M_MO10a_text] { padding-right:26px !important; width: 100% !important; }
/* Different image from desktop */
table[class=D_MO10__M_MO10a] td[class=side_image_wrapper] {
background: url(http://placehold.it/100x190) no-repeat; /* Different image from desktop */
width:100px !important;
}
/* Same image as desktop */
table[class=D_MO10__M_MO10a] td[class=side_image_wrapper_disabled] { /* If using this class, change class name to side_image_wrapper */
background: url(http://placehold.it/183x190) no-repeat; /* Same image as desktop. Place same desktop image src URL path here. */
background-size: 100px 103px; /* Resize image proportionally */
/* background-position:center; /* and/or reposition */
width:100px !important;
}
/* Nested div to enable clickable image */
span[class=D_MO10__M_MO10a_image] {
width: 100px;
min-height: 190px; /* Adjust height as needed */
display: block !important;
}
/* End: D_MO10__M_MO10a */
/* ********************************************** */
/* Module Option */
/* Begin: D_MO21__M_MO21a */
table[class=D_MO21__M_MO21a] {
width: 100% !important;
padding: 0 !important;
}
table[class=D_MO21__M_MO21_subm1], table[class=D_MO21__M_MO21_subm2] {
width: 100% !important;
padding: 26px 17px 17px 17px !important;
}
table[class=D_MO21__M_MO21_subm1] {
border-right: none !important;
padding-bottom: 0 !important;
}
table[class=D_MO21__M_MO21_subm1] td[class=D_MO21__M_MO21_subm1_content] {
padding-bottom: 17px;
border-bottom: 1px solid #cfcdce;
}
td[class=element_stack] {
border-left: none !important;
border-right: none !important;
}
/* End: D_MO21__M_MO21a */
/* ********************************************** */
/* Module Option */
/* Begin: D_MO24__M_MO24 */
table[class=D_MO24__M_MO24] {
width: 100% !important;
padding: 0 !important;
}
table[class=D_MO24__M_MO24_subm1], table[class=D_MO24__M_MO24_subm2] {
width: 100% !important;
}
td[class=D_MO24__M_MO24_subm1_text], td[class=D_MO24__M_MO24_subm2_text] {
width: 100% !important;
padding: 26px 17px 17px 17px !important;
}
td[class=D_MO24__M_MO24_subm1_image_wrapper] {
background: url(http://placehold.it/480x144) no-repeat;
background-size: 100% auto;
width: 100% !important;
height: auto !important;
}
/* Nested div to enable clickable image */
span[class=D_MO24__M_MO24_subm_image] {
width: 100% !important;
height: 90px !important;
display: block;
}
td[class=D_MO24__M_MO24_subm2_image_wrapper] {
background: url(http://placehold.it/480x144) no-repeat;
background-size: 100% auto;
width: 100% !important;
height: auto !important;
}
/* End: D_MO24__M_MO24 */
/* ********************************************** */
/* Module Option */
/* Begin: D_MO27__M_MO27 */
table[class=D_MO27__M_MO27] {
width: 100% !important;
padding: 26px 17px 20px 17px !important;
}
/* End: D_MO27__M_MO27 */
/* End: Module Option Styles. Can use more than one. ============================================ */
/* Begin: Bottom CTA Module Styles. Pick only one. ============================================ */
/* ******************************************** */
/* Bottom CTA Module */
/* Begin: D_CTA3__M_CTA3 */
table[id=D_CTA3__M_CTA3] {
width: 100% !important;
padding: 26px 17px 15px 17px !important;
}
table[id=D_CTA3__M_CTA3] a[class=cta_text] {
width: 100% !important;
line-height: 16px !important;
display: block !important;
padding: 10px 0 10px 0 !important;
}
/* End: D_CTA3__M_CTA3 */
/* ******************************************** */
/* Bottom CTA Module */
/* Begin: D_CTA10__M_CTA10 */
table[id=D_CTA10__M_CTA10] {
width: 100% !important;
padding: 26px 17px 15px 17px !important;
}
table[id=D_CTA10__M_CTA10] a[class=cta_text] {
width: 100% !important;
line-height: 16px !important;
background-color:#C41230 !important;
display: block !important;
padding: 10px 0 10px 0 !important;
}
table[id=D_CTA10__M_CTA10] td[class=cta_bottom_text] {
width: 100% !important;
}
table[id=D_CTA10__M_CTA10] td[class=cta_bottom_text] {
float:left;
clear: both;
padding-top: 15px;
}
table[id=D_CTA10__M_CTA10_text_CTA] {
width: 100% !important;
}
/* End: D_CTA10__M_CTA10 */
/* End: Bottom CTA Module Styles. Pick only one. ============================================ */
/* Begin: Footer. Note: Include in all emails. ============================================ */
img[class=footer_supergraphic] {
width: 100% !important;
height: auto !important;
}
table[id=footer_content_wrap] {
width: 100% !important;
}
table[id=bac_standard_footer] {
width: 100% !important;
padding: 0 10px 0 10px !important;
}
font[class=fontResize_footer] {
font-size: 0.6em !important;
-webkit-text-size-adjust: none !important;
}
/* End: Footer. Note: Include in all emails. ============================================ */
/* Begin: General Formatting. Note: Include in all emails ============================================ */
[class=mhide], img[class=mhide] {
display: none !important;
}
font[class=fontResize] {
font-size: 0.75em;
line-height: 1.5em;
}
[class=wrap_normal] {
white-space:normal !important;
}
td[class=cta_stack] {
float: left !important;
clear: both !important;
display: block !important;
width: 100% !important;
}
[class=mobile_nolink_bacdgrey] a {
color: #524940 !important;
text-decoration: none !important;
}
[class=mobile_nolink_white] a {
color: #ffffff !important;
text-decoration: none !important;
}
[class=mobile_nolink_red] a {
color: #C41230 !important;
text-decoration: none !important;
}
ul[class=mulist] { /*mobile unordered list*/
margin-bottom: 0 !important;
}
/* Stacking elements. Desktop: Elements in one horizontal row. Mobile: Elements stack in one column. */
[class=element_stack] {
float: left !important;
clear: both !important;
width: 100% !important;
}
/* Begin: Desktop text link to Mobile Flat CTA button */
a[class=dtext_mctabtn]{
width: 100% !important;
background-color:#C41230 !important;
clear: both !important;
color: #ffffff !important;
text-decoration: none !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
display: block !important;
text-align: center !important;
cursor: pointer !important;
margin-top: 15px !important;
}
/* End: Desktop text link to Mobile Flat CTA button */
/* Begin: Desktop text link to Mobile Beveled CTA button */
table[class=dtext_mctabtn_beveled] {
/*display: block !important; */
width: 100% !important;
max-width: 100% !important;
height: 32px !important;
max-height: 32px !important;
line-height:auto !important;
font-size:1.0em !important;
overflow: visible !important;
}
table[class=dtext_mctabtn_beveled] td[class=cta_mid] {
width: 100% !important;
}
table[class=dtext_mctabtn_beveled] td[class=cta_mid] a {
line-height:32px !important;
}
span[class=mobile_CTA_btn_text] {
font-size:1.15em !important;
display: block !important;
}
span[class=mobile_CTA_btn_text]:after {
content: "Text link beveled";
}
/* End: Desktop text link to Mobile Beveled CTA button */
/* Keyline: desktop vertical to mobile horizontal */
[class=element_stack_vhkeyline] {
float: left !important;
clear: both !important;
height: 1px !important;
width: 90%;
margin: 0 17px 0 17px !important;
}
/* Begin: Beveled (Jelly) Button styles */
table[class=CTA_button_beveled] {
width: 100%;
margin: 24px auto 0 auto !important;
}
td[class=cta_mid] {
text-align: center !important;
}
td[class=cta_mid] a {
width:100% !important;
/*padding: 0 !important;*/
white-space: nowrap !important;
display: block !important; /* makes entire button clickable */
}
/* End: Beveled (Jelly) Button styles */
/* End: General Formatting. Note: Include in all emails ============================================ */
}
/*End: Mobile Media Query*/
</style>
<style type="text/css">
/* ============================================ */
@media screen and (max-device-width: 480px) {
/*Only for non-full HD phones */
img[class=boa_logo] { /*smaller BAC logo */
width: 103px !important;
height: 14px !important;
}
table[id=boa_logo] {
width: 103px !important;
margin-left: 13px !important;
}
}
/*End: Mobile Media Query for non-full HD phones*/
</style>
</head>
<body bgcolor="#ffffff" style="-webkit-text-size-adjust:none;">
<table id="page_bgcolor" width="551" border="0" cellspacing="0" cellpadding="0">
<!-- If bgcolor of "td" tag with class="main_body_wrapper" is not white (#ffffff), then width="600" of "table" with id="page_bgcolor", else width="551" -->
<tr>
<td align="center" valign="top" bgcolor="#ffffff" class="main_body_wrapper">
<table id="main_body" width="551" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top">
<!-- Begin H1 - Consumer - header area: preheader text, baclogo -->
<table id="header_preheader_baclogo" width="551" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="bottom"><table id="preheader" width="338" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" class="preheader"><font color="#524940" size="1" face="Arial, Helvetica, sans-serif" class="fontResize_preheader">Preheader text. Call <span class="mobile_nolink_bacdgrey">800.123.4567</span> <a name="#" href="http://www.bankofamerica.com" target="_blank" style="color:#012169; text-decoration:underline;"><!-- add style color:#012169; text-decoration:underline; --><strong style="font-weight: normal; white-space:nowrap;">preheader link</strong></a>.<span class="mhide"></span><br />
<br />
Personalization text. Lorem ipsum dolor sit amet.</font></td>
</tr>
</table>
<!-- /preheader end --></td>
<td align="right" valign="bottom"><table id="boa_logo" width="214" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24" class="mhide"><!-- BOA Logo margin left --></td>
<td height="10"><!-- row spacer --></td>
</tr>
<tr>
<td class="mhide"><!-- BOA Logo margin left --></td>
<td align="right" valign="bottom"><a name="#" href="http://www.bankofamerica.com" target="_blank"><img src="http://images.em.bankofamerica.com/imgs/MIE/logos/00000_bac_logo_global.png" width="190" height="26" border="0" alt="Bank of America home page" style="display:block;" class="boa_logo"/></a></td>
</tr>
</table></td>
</tr>
</table>
<!-- End H1 - Consumer -->
</td>
</tr>
<tr class="mhide">
<td align="left" valign="top" height="26"><!-- row spacer --></td>
</tr>
<tr>
<td align="left" valign="top">
<table id="middle_content_sideborders" width="551" border="0" cellspacing="0" cellpadding="0">
<tr class="mhide">
<td bgcolor="#cfcdce" height="1" style="font-size: 1px; line-height: 1%; mso-line-height-rule: exactly;">&nbsp;<!-- border left top corner --></td>
<td bgcolor="#cfcdce" style="font-size: 1px; line-height: 1%; mso-line-height-rule: exactly;">&nbsp;<!-- border top corner --></td>
<td bgcolor="#cfcdce" style="font-size: 1px; line-height: 1%; mso-line-height-rule: exactly;">&nbsp;<!-- border right top corner --></td>
</tr>
<tr>
<td width="1" bgcolor="#cfcdce" class="mhide"><!-- border left --></td>
<td width="549" align="left" valign="top" class="middle_content_wrapper">
<table id="body_content" width="549" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<!-- Begin Main Modules ======================================================================= -->
<!-- Select only one. "tr" and "td" tags not included because only one module should be used. -->
<!-- Begin: D:MM1-CCB1. M:MM1b-CCB1. -->
<!-- Notes: Adjust height of image to accomodate length of copy. Select appropriate image cropping to accomplish this. -->
<table id="D_MM1-CCB1__M_MM1b-CCB1" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#C41230">
<tr>
<td width="17" class="mhide"><!-- col spacer --></td>
<td align="left" valign="top" class="headline_cta_image_right_wrapper">
<table id="headline_cta_image_right" width="" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="349" align="left" valign="top" class="headline_cta_wrapper">
<table id="headline_cta" width="334" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="26" class="mhide"><!-- headline top margin --></td>
</tr>
<tr>
<td align="left" valign="top"><h1 style="padding:0; margin:0;"><font size="6" face="Arial, Helvetica, sans-serif" color="#ffffff" style="font-weight: normal;"><span style="font-size:0.9em;" class="headline_text">D:MM1-CCB1.<br class="mhide" /> M:MM1b-CCB1.</span></font></h1></td>
</tr>
<tr >
<td height="8"><!-- headline bottom margin --></td>
</tr>
<!-- Begin Optional: Main Module Subheadline -->
<tr class="mhide">
<td align="left" valign="top"><font color="#ffffff" size="4" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_subhead"><span class="mobile_nolink_bacdgrey">Subhead lorem ipsum dolor sit amet</span></font></td>
</tr>
<tr>
<td height="8"><!-- subheadline bottom margin --></td>
</tr>
<!-- End Optional: Main Module Subheadline -->
<!-- Begin Optional: Main Module Text -->
<tr>
<td align="left" valign="top"><font color="#ffffff" size="2" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_CTA_call">Desktop: Headline, optional subheadline, copy, one CTA on left. Image on right.<br />
<br />
Mobile: Headline, optional subheadline, copy, one CTA. No image.<br />
<br />
Notes: Work with AD to adjust height of image to accomodate length of copy. AD should select appropriate image cropping to accomplish this.<br />
<br />
Call <span class="mobile_nolink_white">1.888.123.4567</span>. Let us know <span class="mobile_nolink_white">today</span>.
</font></td>
</tr>
<tr>
<td height="15" class="mhide"><!-- subheadline bottom margin --></td>
</tr>
<!-- End Optional: Main Module Text -->
<tr>
<td align="left" valign="top">
<!-- Begin D:CCB1. 1 CTA Button. M:CCB1. 1 CTA Button.
Note: Use either Flat CTA Button or Beveled CTA Button. Delete the other you are not using. -->
<!-- Begin: CTA Button: Flat. -->
<!-- Note: Reduce left and right padding to accomodate length of CTA link text. -->
<table id="CTA_button_flat" width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle" bgcolor="#ffffff" height="40" class="CTA_button_flat_td"><font color="#C41230" size="2" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_CTA"><!-- When changing button color, change bgcolor property. --><a name="#" href="http://www.bankofamerica.com" target="_blank" class="cta_text" style="color:#C41230; padding:10px 40px 10px 40px; text-align:center; text-decoration:none;"><!-- add style color:#C41230; padding:10px 40px 10px 40px; text-align:center; text-decoration:none; --><strong style="white-space:nowrap;">Customizable&nbsp;CTA</strong></a></font></td>
</tr>
</table>
<!-- End: CTA Button: Flat. -->
<!-- Begin: CTA Button: Beveled. Default white CTA on Red BG -->
<table class="CTA_button_beveled" width="200" border="0" cellpadding="0" cellspacing="0" background="images/00000_cta_btn_white_on_red_mid.gif" bgcolor="#ffffff" style="display:none; max-width:0px; max-height:0px; line-height:0px; font-size:0px; overflow:hidden; mso-hide:all"><!-- To enable Beveled CTA Button, remove style property. When changing button color, change bgcolor property. -->
<tr>
<td width="8" height="32" valign="top"><img src="images/00000_cta_btn_left_red_bg.png" width="8" height="32" border="0" alt="" style="display:block;"></td>
<!-- Adjust left and right padding according to length of CTA link text. -->
<td align="center" height="32" valign="middle" class="cta_mid"><a name="#" href="http://www.bankofamerica.com" target="_blank" style="text-decoration:none; display: block; "><!-- style text-decoration:none; display: block; --><font color="#c41230" size="2" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;"><strong>Customizable&nbsp;CTA</strong></font></a></td>
<td width="7" height="32" valign="top"><img src="images/00000_cta_btn_right_red_bg.png" width="7" height="32" border="0" alt="" style="display:block;"></td>
</tr>
</table>
<!-- End: CTA Button: Beveled. -->
<!-- End D:CCB1. M:CCB1. -->
</td>
</tr>
<tr>
<td height="15" class="mhide"><!-- CTA bottom margin --></td>
</tr>
</table>
</td>
<td align="right" valign="top" width="183" class="mhide"><a name="#" href="http://www.bankofamerica.com" target="_blank"><img src="http://placehold.it/183x400" alt="insert link destination description" width="183" height="400" border="0" style="display: block" /></a></td>
</tr>
</table>
<!-- /headline_cta end --></td>
</tr>
</table>
<!-- End: D:MM1-CCB1. M:MM1a-CCB1. -->
<!-- Delete this space -->&nbsp;<!-- ======================================================================= -->
<!-- Begin: D:MM17-CCB1. M:MM17-CCB1. -->
<!-- Desktop: Headline, optional subheadline, copy, and 1 CTA. No image.
Mobile: Headline, optional subheadline, copy, and 1 CTA. No image. -->
<table id="D_MM17-CCB1__M_MM17-CCB1" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#C41230">
<tr class="mhide">
<td height="26" width="17"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
<tr>
<td class="mhide"><!-- col spacer --></td>
<td align="left" valign="top" class="headline_cta_wrapper"><table id="headline_cta" width="517" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top"><h1 style="padding:0; margin:0;"><font size="6" face="Arial, Helvetica, sans-serif" color="#ffffff" style="font-weight: normal;"><span style="font-size:0.9em;" class="headline_text">D:MM17-CCB1. M:MM17-CCB1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></font></h1></td>
</tr>
<tr >
<td height="8"><!-- headline bottom margin --></td>
</tr>
<!-- Begin Optional: Main Module Subheadline -->
<tr>
<td align="left" valign="top"><font color="#ffffff" size="4" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_subhead">Subhead lorem ipsum dolor sit amet</font></td>
</tr>
<tr>
<td height="8"><!-- subheadline bottom margin --></td>
</tr>
<!-- End Optional: Main Module Subheadline -->
<!-- Begin Optional: Main Module Text -->
<tr>
<td align="left" valign="top"><font color="#ffffff" size="2" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize">Desktop: Headline, optional subheadline, copy, and 1 CTA. No image.<br />
<br />
Mobile: Headline, optional subheadline, copy, and 1 CTA. No image.</font></td>
</tr>
<tr class="mhide">
<td height="11"><!-- subheadline bottom margin --></td>
</tr>
<!-- End Optional: Main Module Text -->
<tr>
<td align="left" valign="top">
<!-- Begin D:CCB1. 1 CTA Button. M:CCB1. 1 CTA Button. -->
<!-- Begin: CTA Button: Flat. -->
<!-- Note: Reduce left and right padding to accomodate length of CTA link text. -->
<table id="CTA_button_flat" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle" bgcolor="#ffffff" height="40" class="CTA_button_flat_td"><!-- When changing button color, change bgcolor property. --><font color="#C41230" size="2" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_CTA"><a name="#" href="http://www.bankofamerica.com" target="_blank" class="cta_text" style="color:#C41230; padding:10px 80px 10px 80px; text-align:center; text-decoration:none;"><!-- add style color:#C41230; padding:10px 80px 10px 80px; text-align:center; text-decoration:none; --><strong style="white-space:nowrap;">Customizable&nbsp;CTA</strong></a></font></td>
</tr>
</table>
<!-- End: CTA Button: Flat. -->
<!-- Begin: CTA Button: Beveled. Default white CTA on Red BG -->
<table class="CTA_button_beveled" width="200" border="0" cellpadding="0" cellspacing="0" background="images/00000_cta_btn_white_on_red_mid.gif" bgcolor="#ffffff" style="display:none; max-width:0px; max-height:0px; line-height:0px; font-size:0px; overflow:hidden; mso-hide:all"><!-- To enable Beveled CTA Button, remove style property. When changing button color, change bgcolor property. -->
<tr>
<td width="8" height="32" valign="top"><img src="images/00000_cta_btn_left_red_bg.png" width="8" height="32" border="0" alt="" style="display:block;"></td>
<!-- Adjust left and right padding according to length of CTA link text. -->
<td align="center" height="32" valign="middle" class="cta_mid"><a name="#" href="http://www.bankofamerica.com" target="_blank" style="text-decoration:none; display: block; "><!-- style text-decoration:none; display: block; --><font color="#c41230" size="2" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;"><strong>Customizable&nbsp;CTA</strong></font></a></td>
<td width="7" height="32" valign="top"><img src="images/00000_cta_btn_right_red_bg.png" width="7" height="32" border="0" alt="" style="display:block;"></td>
</tr>
</table>
<!-- End: CTA Button: Beveled. -->
<!-- End D:CCB1. M:CCB1. -->
</td>
</tr>
</table>
<!-- /headline_cta end --></td>
</tr>
<tr class="mhide">
<td height="23"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
</table>
<!-- End: D:MM17-CCB1. M:MM17-CCB1. -->
<!-- Delete this space -->&nbsp;<!-- ======================================================================= -->
<!-- Begin: D_MM17-CCB4__M_MM17-CCB4. -->
<!-- Notes: Desktop: Headline, optional subheadline, copy, 2 CTAs, copy on left, CTA button on right. full width. No image.
Mobile: Headline, optional subheadline, copy, 2 CTAs: text link on top, CTA button on the bottom. No image. -->
<table id="D_MM17-CCB4__M_MM17-CCB4" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#C41230">
<tbody><tr class="mhide">
<td height="26" width="17"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
<tr>
<td class="mhide"><!-- col spacer --></td>
<td align="left" valign="top" class="headline_cta_wrapper"><table id="headline_cta" width="517" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td align="left" valign="top"><h1 style="padding:0; margin:0;"><font size="6" face="Arial, Helvetica, sans-serif" color="#ffffff" style="font-weight: normal;"><span style="font-size:0.9em;" class="headline_text">D:MM17-CCB4. M:MM17-CCB4. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></font></h1></td>
</tr>
<tr >
<td height="8"><!-- headline bottom margin --></td>
</tr>
<!-- Begin Optional: Main Module Subheadline -->
<tr>
<td align="left" valign="top"><font color="#ffffff" size="4" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_subhead">Subhead lorem ipsum dolor sit amet</font></td>
</tr>
<tr>
<td height="8"><!-- subheadline bottom margin --></td>
</tr>
<!-- End Optional: Main Module Subheadline -->
<!-- Begin Optional: Main Module Text -->
<tr>
<td align="left" valign="top"><font color="#ffffff" size="2" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize">Desktop: Headline, optional subheadline, copy, 2 CTAs, copy on left, CTA button on right. full width. No image.<br />
<br />
Mobile: Headline, optional subheadline, copy, 2 CTAs: text link on top, CTA button on the bottom. No image.</font></td>
</tr>
<tr>
<td height="11"><!-- subheadline bottom margin --></td>
</tr>
<!-- End Optional: Main Module Text -->
<tr>
<td align="left" valign="top">
<!-- Begin D:CCB4. Text & CTA Button side-by-side. M:CCB1. Text and CTA Button stacked. Button at bottom. -->
<table id="CTAs_top" border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr class="cta_row">
<td class="stackable_wrapper">
<table id="CTA_text" align="left" width="49%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="mhide" height="5"><!-- Text CTA top margin --></td></tr>
<tr>
<td align="left" valign="top"><font color="#ffffff" size="3" face="Arial, Helvetica, sans-serif" class="subtext"><strong>Call <span class="mobile_nolink_white">1.888.123.4567.</span></strong> <br class="mhide" /> Lorem ipsum dolor sit amet</font></td>
</tr>
</tbody>
</table>
<!-- Begin CTA Button.
Note: Use either Flat CTA Button or Beveled CTA Button. Delete the other you are not using. -->
<!-- Begin: CTA Button: Flat -->
<table id="CTA_button_flat" align="right" width="200" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle" bgcolor="#ffffff" height="40" width="155" class="CTA_button_flat_td"><!-- When changing button color, change bgcolor property. --><font color="#ffffff" size="2" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_CTA"><a name="#" href="http://www.bankofamerica.com" target="_blank" class="cta_text" style="color:#C41230; padding:10px 40px 10px 40px; text-align:center; text-decoration:none;"><!-- add style color:#C41230; padding:10px 40px 10px 40px; text-align:center; text-decoration:none; --><strong style="white-space:nowrap;">Customizable&nbsp;CTA</strong></a></font></td>
</tr>
</tbody></table>
<!-- End: CTA Button: Flat -->
<!-- Begin: CTA Button: Beveled. Default white CTA on Red BG -->
<table class="CTA_button_beveled" align="right" width="200" border="0" cellpadding="0" cellspacing="0" background="images/00000_cta_btn_white_on_red_mid.gif" bgcolor="#ffffff" style="display:none; max-width:0px; max-height:0px; line-height:0px; font-size:0px; overflow:hidden; mso-hide:all"><!-- To enable Beveled CTA Button, remove style property. When changing button color, change bgcolor property. -->
<tr>
<td width="8" height="32" valign="top"><img src="images/00000_cta_btn_left_red_bg.png" width="8" height="32" border="0" alt="" style="display:block;"></td>
<!-- Adjust left and right padding according to length of CTA link text. -->
<td align="center" height="32" valign="middle" class="cta_mid"><a name="#" href="http://www.bankofamerica.com" target="_blank" style="text-decoration:none; display: block; "><!-- style text-decoration:none; display: block; --><font color="#c41230" size="2" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;"><strong>Customizable&nbsp;CTA</strong></font></a></td>
<td width="7" height="32" valign="top"><img src="images/00000_cta_btn_right_red_bg.png" width="7" height="32" border="0" alt="" style="display:block;"></td>
</tr>
</table>
<!-- End: CTA Button: Beveled. -->
<!-- End: CTA Button. -->
</td>
</tr>
</tbody></table>
<!-- End D:CCB4. M:CCB1. -->
</td>
</tr>
</tbody></table>
<!-- /headline_cta end --></td>
</tr>
<tr class="mhide">
<td height="20"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
</tbody></table>
<!-- End: D:MM1-CCB1. D_MM17-CCB4__M_MM17-CCB4. -->
<!-- Delete this space -->&nbsp;<!-- ======================================================================= -->
<!-- Begin: D:MM17-CCB6. M:MM17-CCB6. -->
<!-- Desktop: Headline, optional subheadline, copy, 2 CTAs, icon with copy on left, CTA button on right. full width. No image.
Mobile: Headline, copy, 2 CTAs: text link on top, CTA button on the bottom. No image. -->
<table id="D_MM17-CCB6__M_MM17-CCB6" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#C41230">
<tr class="mhide">
<td height="26" width="17"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
<tr>
<td class="mhide"><!-- col spacer --></td>
<td align="left" valign="top" class="headline_cta_wrapper"><table id="headline_cta" width="517" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top"><h1 style="padding:0; margin:0;"><font size="6" face="Arial, Helvetica, sans-serif" color="#ffffff" style="font-weight: normal;"><span style="font-size:0.9em;" class="headline_text">D:MM17-CCB6. M:MM17-CCB6. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></font></h1></td>
</tr>
<tr >
<td height="8"><!-- headline bottom margin --></td>
</tr>
<!-- Begin Optional: Main Module Subheadline -->
<tr>
<td align="left" valign="top"><font color="#ffffff" size="4" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_subhead">Subhead lorem ipsum dolor sit amet</font></td>
</tr>
<tr>
<td height="8"><!-- subheadline bottom margin --></td>
</tr>
<!-- End Optional: Main Module Subheadline -->
<!-- Begin Optional: Main Module Text -->
<tr>
<td align="left" valign="top"><font color="#ffffff" size="2" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize">Desktop: Headline, optional subheadline, copy, 2 CTAs, icon with text copy on left, CTA button on right. Full width. No image.<br />
<br />
Mobile: Headline, copy, 2 CTAs: icon with text copy on top, CTA button on the bottom. No image.<br />
<br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut odio in dui volutpat tincidunt. Integer massa mauris, pretium eget risus at, congue rutrum quam.</font></td>
</tr>
<tr>
<td height="10" class="mhide"><!-- Main Module Text bottom margin --></td>
</tr>
<!-- End Optional: Main Module Text -->
<tr>
<td align="left" valign="top">
<!-- Begin D:CCB6. Text & CTA Button side-by-side. M:CCB6. (Image & text) and CTA Button stacked. (Image & text) at top. Button at bottom. -->
<table id="CTAs_top" border="0" cellspacing="0" cellpadding="0" width="100%">
<tr class="cta_row">
<td align="left" valign="top" class="stackable_wrapper">
<table id="CTA_text" align="left" width="49%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td align="left" valign="top" class="image_left" width="35"><a name="#" href="http://www.bankofamerica.com" target="_blank"><img src="http://placehold.it/35x35" alt="insert link destination description" width="35" height="35" style="display: block" border="0" /></a></td>
<td width="10" class="mhide"></td>
<td align="left" valign="top" class="image_text"><font color="#ffffff" size="2" face="Arial, Helvetica, sans-serif" class="subtext">Ut experum fuga. Mus si dit alicienimo re pa. Ut experum fuga. Mus si dit alicienimo re pa.</font></td>
</tr>
</tbody></table>
<!-- Begin CTA Button.
Note: Use either Flat CTA Button or Beveled CTA Button. Delete the other you are not using. -->
<!-- Begin: CTA Button: Flat -->
<table id="CTA_button_flat" align="right" width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle" bgcolor="#ffffff" height="40" class="CTA_button_flat_td"><!-- When changing button color, change bgcolor property. --><font color="#C41230" size="2" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_CTA"><a name="#" href="http://www.bankofamerica.com" target="_blank" class="cta_text" style="color:#C41230; padding:10px 40px 10px 40px; text-align:center; text-decoration:none;"><!-- add style color:#C41230; padding:10px 40px 10px 40px; text-align:center; text-decoration:none; --><strong style="white-space:nowrap;">Customizable&nbsp;CTA</strong></a></font></td>
</tr>
</table>
<!-- End: CTA Button: Flat -->
<!-- Begin: CTA Button: Beveled. Default white CTA on Red BG -->
<table class="CTA_button_beveled" align="right" width="200" border="0" cellpadding="0" cellspacing="0" background="images/00000_cta_btn_white_on_red_mid.gif" bgcolor="#ffffff" style="display:none; max-width:0px; max-height:0px; line-height:0px; font-size:0px; overflow:hidden; mso-hide:all"><!-- To enable Beveled CTA Button, remove style property. When changing button color, change bgcolor property. -->
<tr>
<td width="8" height="32" valign="top"><img src="images/00000_cta_btn_left_red_bg.png" width="8" height="32" border="0" alt="" style="display:block;"></td>
<!-- Adjust left and right padding according to length of CTA link text. -->
<td align="center" height="32" valign="middle" class="cta_mid"><a name="#" href="http://www.bankofamerica.com" target="_blank" style="text-decoration:none; display: block; "><!-- style text-decoration:none; display: block; --><font color="#c41230" size="2" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;"><strong>Customizable&nbsp;CTA</strong></font></a></td>
<td width="7" height="32" valign="top"><img src="images/00000_cta_btn_right_red_bg.png" width="7" height="32" border="0" alt="" style="display:block;"></td>
</tr>
</table>
<!-- End: CTA Button: Beveled. -->
<!-- End: CTA Button. -->
</td>
</tr>
</table>
<!-- End D:CCB6. M:CCB6. -->
</td>
</tr>
</table>
<!-- /headline_cta end --></td>
</tr>
<tr class="mhide">
<td height="23"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
</table>
<!-- End: D:MM17-CCB6. M:MM17-CCB6. -->
<!-- Delete this space -->&nbsp;<!-- ======================================================================= -->
<!-- Begin: D:MM19-CCB1. M:MM19-CCB1. -->
<!-- Desktop: Headline, optional subheadline, 1 CTA with copy above and below. No image.
Mobile: Headline, optional subheadline, 1 CTA with copy above and below. No image. -->
<table id="D_MM19-CCB1__M_MM19-CCB1" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#C41230">
<tr class="mhide">
<td height="26" width="17"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
<tr>
<td class="mhide"><!-- col spacer --></td>
<td align="left" valign="top" class="headline_cta_wrapper"><table id="headline_cta" width="517" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top"><h1 style="padding:0; margin:0;"><font size="6" face="Arial, Helvetica, sans-serif" color="#ffffff" style="font-weight: normal;"><span style="font-size:0.9em;" class="headline_text">D:MM19-CCB1. M:MM19-CCB1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></font></h1></td>
</tr>
<tr >
<td height="8"><!-- headline bottom margin --></td>
</tr>
<!-- Begin Optional: Main Module Subheadline -->
<tr>
<td align="left" valign="top"><font color="#ffffff" size="4" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_subhead">Subhead lorem ipsum dolor sit amet</font></td>
</tr>
<tr>
<td height="8"><!-- subheadline bottom margin --></td>
</tr>
<!-- End Optional: Main Module Subheadline -->
<!-- Begin Optional: Main Module Text -->
<tr>
<td align="left" valign="top"><font color="#ffffff" size="2" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize">Desktop: Headline, optional subheadline, 1 CTA with copy above and below. No image.<br />
<br />
Mobile: Headline, optional subheadline, 1 CTA with copy above and below. No image.</font></td>
</tr>
<tr class="mhide">
<td height="11"><!-- subheadline bottom margin --></td>
</tr>
<!-- End Optional: Main Module Text -->
<tr>
<td align="left" valign="top">
<!-- Begin D:CCB1. 1 CTA Button. M:CCB1. 1 CTA Button.
Note: Use either Flat CTA Button or Beveled CTA Button. Delete the other you are not using. -->
<!-- Begin: CTA Button: Flat. -->
<!-- Note: Reduce left and right padding to accomodate length of CTA link text. -->
<table id="CTA_button_flat" width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle" bgcolor="#ffffff" height="40" class="CTA_button_flat_td"><font color="#C41230" size="2" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_CTA"><!-- When changing button color, change bgcolor property. --><a name="#" href="http://www.bankofamerica.com" target="_blank" class="cta_text" style="color:#C41230; padding:10px 40px 10px 40px; text-align:center; text-decoration:none;"><!-- add style color:#C41230; padding:10px 40px 10px 40px; text-align:center; text-decoration:none; --><strong style="white-space:nowrap;">Customizable&nbsp;CTA</strong></a></font></td>
</tr>
</table>
<!-- End: CTA Button: Flat. -->
<!-- Begin: CTA Button: Beveled. Default white CTA on Red BG -->
<table class="CTA_button_beveled" width="200" border="0" cellpadding="0" cellspacing="0" background="images/00000_cta_btn_white_on_red_mid.gif" bgcolor="#ffffff" style="display:none; max-width:0px; max-height:0px; line-height:0px; font-size:0px; overflow:hidden; mso-hide:all"><!-- To enable Beveled CTA Button, remove style property. When changing button color, change bgcolor property. -->
<tr>
<td width="8" height="32" valign="top"><img src="images/00000_cta_btn_left_red_bg.png" width="8" height="32" border="0" alt="" style="display:block;"></td>
<!-- Adjust left and right padding according to length of CTA link text. -->
<td align="center" height="32" valign="middle" class="cta_mid"><a name="#" href="http://www.bankofamerica.com" target="_blank" style="text-decoration:none; display: block; "><!-- style text-decoration:none; display: block; --><font color="#c41230" size="2" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;"><strong>Customizable&nbsp;CTA</strong></font></a></td>
<td width="7" height="32" valign="top"><img src="images/00000_cta_btn_right_red_bg.png" width="7" height="32" border="0" alt="" style="display:block;"></td>
</tr>
</table>
<!-- End: CTA Button: Beveled. -->
<!-- End D:CCB1. M:CCB1. -->
</td>
</tr>
<tr>
<td height="11"><!-- row spacer --></td>
</tr>
<!-- Begin Optional: Main Module Text2 -->
<tr>
<td align="left" valign="top"><font color="#ffffff" size="2" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut odio in dui volutpat tincidunt. Integer massa mauris, pretium eget risus at, congue rutrum quam.</font></td>
</tr>
<tr>
<td height="11"><!-- subheadline bottom margin --></td>
</tr>
<!-- End Optional: Main Module Text2 -->
</table>
<!-- /headline_cta end --></td>
</tr>
<tr class="mhide">
<td height="23"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
</table>
<!-- End: D:MM19-CCB1. M:MM19-CCB8. -->
<!-- Delete this space -->&nbsp;<!-- ======================================================================= -->
<!-- Begin: D:MM19-CCB8. M:MM19-CCB8. -->
<!-- Desktop: Headline, optional subheadline, 1 icon image on the left with copy on the right and more copy below. No image.
Mobile: Headline, optional subheadline, 1 icon image on the left with copy on the right and more copy below. No image.
-->
<table id="D_MM19-CCB8__M_MM19-CCB8" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#C41230">
<tbody><tr class="mhide">
<td height="26" width="17"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
<tr>
<td class="mhide"><!-- col spacer --></td>
<td align="left" valign="top" class="headline_cta_wrapper"><table id="headline_cta" width="517" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td align="left" valign="top"><h1 style="padding:0; margin:0;"><font size="6" face="Arial, Helvetica, sans-serif" color="#ffffff" style="font-weight: normal;"><span style="font-size:0.9em;" class="headline_text">D:MM19-CCB8. M:MM19-CCB8. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></font></h1></td>
</tr>
<tr>
<td height="15"><!-- headline bottom margin --></td>
</tr>
<!-- Begin Optional: Main Module Subheadline -->
<tr>
<td align="left" valign="top"><font color="#ffffff" size="4" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_subhead">Subhead lorem ipsum dolor sit amet</font></td>
</tr>
<tr>
<td height="8"><!-- subheadline bottom margin --></td>
</tr>
<!-- End Optional: Main Module Subheadline -->
<!-- Begin Optional: Main Module Text -->
<tr>
<td align="left" valign="top"><font color="#ffffff" size="2" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize">Desktop: Headline, optional subheadline, 1 icon image on the left with copy on the right and more copy below. No image.<br />
<br />
Mobile: Headline, optional subheadline, 1 icon image on the left with copy on the right and more copy below. No image.</font></td>
</tr>
<tr>
<td height="11"><!-- subheadline bottom margin --></td>
</tr>
<!-- End Optional: Main Module Text -->
<tr>
<td align="left" valign="top">
<!-- Begin D:CCB8. Icon & Text side-by-side. M:CCB8. Icon & Text side-by-side. -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td width="46" align="left" valign="top" class="icon_left"><a name="#" href="http://www.bankofamerica.com" target="_blank"><img src="http://placehold.it/35x35" alt="insert link destination description" width="35" height="35" border="0" style="display: block" /></a></td>
<td align="left" valign="top"><font color="#ffffff" size="2" face="Arial, Helvetica, sans-serif" class="fontResize" style="line-height:1.4em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</font></td>
</tr>
</tbody></table>
<!-- End D:CCB8. M:CCB8. -->
</td>
</tr>
<tr>
<td height="15"><!-- row spacer --></td>
</tr>
<!-- Begin Optional: Main Module Text2 -->
<tr>
<td align="left" valign="top"><font color="#ffffff" size="3" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</font></td>
</tr>
<!-- End Optional: Main Module Text2 -->
</tbody></table>
<!-- /headline_cta end --></td>
</tr>
<tr class="mhide">
<td height="23"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
</tbody></table>
<!-- End: D:MM19-CCB8. M:MM19-CCB8. -->
<!-- Delete this space -->&nbsp;<!-- ======================================================================= -->
<!-- Begin: D:MM20. M:MM20. -->
<table id="D_MM20__M_MM20" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#C41230">
<tr class="mhide">
<td height="26" width="17"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
<tr>
<td class="mhide"><!-- col spacer --></td>
<td align="left" valign="top" class="headline_cta_wrapper"><table id="headline_cta" width="517" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top"><h1 style="padding:0; margin:0;"><font size="6" face="Arial, Helvetica, sans-serif" color="#ffffff" style="font-weight: normal;"><span style="font-size:0.9em;" class="headline_text">D:MM20. M:MM20. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></font></h1></td>
</tr>
<tr >
<td height="8"><!-- headline bottom margin --></td>
</tr>
<!-- Begin Optional: Main Module Subheadline -->
<tr>
<td align="left" valign="top"><font color="#ffffff" size="4" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_subhead">Subhead lorem ipsum dolor sit amet</font></td>
</tr>
<tr>
<td height="8"><!-- subheadline bottom margin --></td>
</tr>
<!-- End Optional: Main Module Subheadline -->
<!-- Begin Optional: Main Module Text -->
<tr>
<td align="left" valign="top"><font color="#ffffff" size="2" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize">Desktop: Headline, optional subheadline, copy. No image.<br />
<br />
Mobile: Headline, optional subheadline, copy. No image.</font></td>
</tr>
<!-- End Optional: Main Module Text -->
</table>
<!-- /headline_cta end --></td>
</tr>
<tr class="mhide">
<td height="23"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
</table>
<!-- End: D:MM20. M:MM20. -->
<!-- Delete this space -->&nbsp;<!-- ======================================================================= -->
<!-- Begin: D:MM21-CCB1. M:MM21b-CCB1. -->
<table id="D_MM21-CCB1__M_MM21b-CCB1" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="mhide">
<td width="549" height="96" align="left" valign="top"><a href="http://www.bankofamerica.com" name="#" target="_blank"><img src="http://placehold.it/549x96" width="549" height="96" border="0" alt="insert link destination description" style="display: block" /></a></td>
</tr>
<tr>
<td align="left" valign="top">
<table id="D_MM21-CCB1__M_MM21b-CCB1_textwrapper" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#C41230" >
<tr class="mhide">
<td height="26" width="17"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
<tr>
<td class="mhide"><!-- col spacer --></td>
<td align="left" valign="top" class="headline_cta_wrapper"><table id="headline_cta" width="517" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top"><h1 style="padding:0; margin:0;"><font size="6" face="Arial, Helvetica, sans-serif" color="#ffffff" style="font-weight: normal;"><span style="font-size:0.9em;" class="headline_text">D:MM21-CCB1. M:MM21b-CCB1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></font></h1></td>
</tr>
<tr >
<td height="8"><!-- headline bottom margin --></td>
</tr>
<!-- Begin Optional: Main Module Subheadline -->
<tr>
<td align="left" valign="top"><font color="#ffffff" size="4" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_subhead">Subhead lorem ipsum dolor sit amet</font></td>
</tr>
<tr>
<td height="8"><!-- subheadline bottom margin --></td>
</tr>
<!-- End Optional: Main Module Subheadline -->
<!-- Begin Optional: Main Module Text -->
<tr>
<td align="left" valign="top"><font color="#ffffff" size="2" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize">Desktop: Banner image, headline, optional subheadline, copy, CTA.<br />
<br />
Mobile: No banner image, headline, optional subheadline, copy, CTA.</font></td>
</tr>
<tr>
<td height="11"><!-- subheadline bottom margin --></td>
</tr>
<!-- End Optional: Main Module Text -->
<tr>
<td align="left" valign="top">
<!-- Begin D:CCB1. 1 CTA Button. M:CCB1. 1 CTA Button. -->
<!-- Begin: CTA Button: Flat. -->
<!-- Note: Reduce left and right padding to accomodate length of CTA link text. -->
<table id="CTA_button_flat" width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle" bgcolor="#ffffff" height="40" class="CTA_button_flat_td"><font color="#C41230" size="2" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_CTA"><!-- When changing button color, change bgcolor property. --><a name="#" href="http://www.bankofamerica.com" target="_blank" class="cta_text" style="color:#C41230; padding:10px 40px 10px 40px; text-align:center; text-decoration:none;"><!-- add style color:#C41230; padding:10px 40px 10px 40px; text-align:center; text-decoration:none; --><strong style="white-space:nowrap;">Customizable&nbsp;CTA</strong></a></font></td>
</tr>
</table>
<!-- Begin: CTA Button: Beveled. Default white CTA on Red BG -->
<table class="CTA_button_beveled" width="200" border="0" cellpadding="0" cellspacing="0" background="images/00000_cta_btn_white_on_red_mid.gif" bgcolor="#ffffff" style="display:none; max-width:0px; max-height:0px; line-height:0px; font-size:0px; overflow:hidden; mso-hide:all"><!-- To enable Beveled CTA Button, remove style property. When changing button color, change bgcolor property. -->
<tr>
<td width="8" height="32" valign="top"><img src="images/00000_cta_btn_left_red_bg.png" width="8" height="32" border="0" alt="" style="display:block;"></td>
<!-- Adjust left and right padding according to length of CTA link text. -->
<td align="center" height="32" valign="middle" class="cta_mid"><a name="#" href="http://www.bankofamerica.com" target="_blank" style="text-decoration:none; display: block; "><!-- style text-decoration:none; display: block; --><font color="#c41230" size="2" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;"><strong>Customizable&nbsp;CTA</strong></font></a></td>
<td width="7" height="32" valign="top"><img src="images/00000_cta_btn_right_red_bg.png" width="7" height="32" border="0" alt="" style="display:block;"></td>
</tr>
</table>
<!-- End: CTA Button: Beveled. -->
<!-- End D:CCB1. M:CCB1. -->
</td>
</tr>
</table>
<!-- /headline_cta end --></td>
</tr>
<tr class="mhide">
<td height="23"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End: D:MM21-CCB1. M:MM21b-CCB1. -->
<!-- End Main Modules ======================================================================= -->
</td>
</tr>
<tr>
<td align="left" valign="top">
<table id="middle_content_modules" width="549" border="0" cellspacing="0" cellpadding="0">
<!-- Begin Module Options ======================================================================= -->
<!-- More than one can be selected. "tr" and "td" tags included because more than one row of modules can be included -->
<!-- Begin: D:MO1. M:MO1a. Module text left. Image right. -->
<tr>
<td align="left" valign="top">
<table class="D_MO1__M_MO1a" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="184" align="left" valign="top" class="side_image_wrapper" ><a name="#" href="http://www.bankofamerica.com" target="_blank"><span class="D_MO1__M_MO1a_image"><img src="http://placehold.it/183x190" width="183" height="190" border="0" alt="insert link destination description" class="mhide" style="display:block;" /></span></a></td>
<td align="left" valign="top">
<table class="D_MO1__M_MO1a_text" width="342" border="0" cellspacing="0" cellpadding="0">
<tr class="mhide">
<td width="26" height="26"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
<tr>
<td><!-- col spacer --></td>
<td align="left" valign="top"><font color="#524940" size="2" face="Arial, Helvetica, sans-serif" class="fontResize" style="line-height:1.4em;"><font color="#C41230" size="4" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_subhead"><strong>D:MO1. M:MO1a.</strong></font><br />
<br />
Desktop: Image left. Module text right. <br />
Mobile: Image left. If different, set path in CSS. If same image as desktop, set new image size in CSS as background-size. Module text right.</font></td>
</tr>
<tr class="mhide">
<td height="12"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- /D_MO1__M_MO1a end -->
</td>
</tr>
<!-- End: D:MO1. M:MO1a. -->
<!-- ======================================================================= -->
<!-- Begin: D:MO1. M:MO1b. Module text left. Image right. -->
<tr>
<td align="left" valign="top">
<table class="D_MO1__M_MO1b" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" class="mhide"><a name="#" href="http://www.bankofamerica.com" target="_blank"><img src="http://placehold.it/183x190" width="183" height="190" border="0" alt="insert link destination description" style="display: block" /></a></td>
<td align="left" valign="top">
<table class="D_MO1__M_MO1b_text" width="342" border="0" cellspacing="0" cellpadding="0">
<tr class="mhide">
<td width="26" height="26"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
<tr>
<td><!-- col spacer --></td>
<td align="left" valign="top"><font color="#524940" size="2" face="Arial, Helvetica, sans-serif" class="fontResize" style="line-height:1.4em;"><font color="#C41230" size="4" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_subhead"><strong>D:MO1. M:MO1b.</strong></font><br />
<br />
Desktop: Image left. Module text right. <br />
Mobile: Module text only. No image.<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<!-- Footnote 01 --><a href="#footnote_01" style="text-decoration:none;"><font color="#524940" size="1"><sup><strong style="font-weight:normal;">1</strong></sup></font></a><!-- /Footnote 01 --> Pellentesque ut odio in dui volutpat tincidunt.</font></td>
</tr>
<tr class="mhide">
<td height="12"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- /D_MO1__M_MO1b end -->
</td>
</tr>
<!-- End: D:MO1. M:MO1b. -->
<!-- ======================================================================= -->
<!-- Begin: D:MO1. M:MO1c. Module text left. Image right. -->
<tr>
<td align="left" valign="top">
<table class="D_MO1__M_MO1c" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" class="mhide"><a name="#" href="http://www.bankofamerica.com" target="_blank"><img src="http://placehold.it/183x190" width="183" height="190" border="0" alt="insert link destination description" style="display: block" /></a></td>
<td align="left" valign="top">
<table class="D_MO1__M_MO1c_text" width="342" border="0" cellspacing="0" cellpadding="0">
<tr class="mhide">
<td width="26" height="26"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
<tr>
<td><!-- col spacer --></td>
<td align="left" valign="top"><div class="D_MO1__M_MO1c_mimage"></div><font color="#524940" size="2" face="Arial, Helvetica, sans-serif" class="fontResize" style="line-height:1.4em;"><font color="#C41230" size="4" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_subhead"><strong>D:MO1. M:MO1c.</strong></font><br />
<br />
Desktop: Image left. Module text right. <br />
Mobile: Module text with different thumbnail image above headline.<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut odio in dui volutpat tincidunt.</font></td>
</tr>
<tr class="mhide">
<td height="12"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- /D_MO1__M_MO1c end -->
</td>
</tr>
<!-- End: D:MO1. M:MO1c. -->
<!-- ======================================================================= -->
<!-- Begin: D:MO2. M:MO2a. Module text left. Image right. -->
<tr>
<td align="left" valign="top">
<table class="D_MO2__M_MO2a" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top">
<table class="D_MO2__M_MO2a_text" width="342" border="0" cellspacing="0" cellpadding="0">
<tr class="mhide">
<td width="17" height="26"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
<tr>
<td><!-- col spacer --></td>
<td align="left" valign="top"><font color="#524940" size="2" face="Arial, Helvetica, sans-serif" class="fontResize" style="line-height:1.4em;"><font color="#C41230" size="4" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_subhead"><strong>D:MO2. M:MO2a.</strong></font><br />
<br />
Desktop: Module text left. Image right.<br />
Mobile: Module text left. Image right. If different, set path in CSS. If same image as desktop, set new image size in CSS as background-size.</font></td>
</tr>
<tr class="mhide">
<td height="12"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
</table>
</td>
<td align="right" valign="top" class="side_image_wrapper" style="white-space: nowrap !important;"><a name="#" href="http://www.bankofamerica.com" target="_blank"><span class="D_MO2__M_MO2a_image"><img src="http://placehold.it/183x190" width="183" height="190" border="0" alt="insert link destination description" class="mhide" style="display:block;" /></span></a></td>
</tr>
</table>
<!-- /D_MO2__M_MO2a end -->
</td>
</tr>
<!-- End: D:MO2. M:MO2a. -->
<!-- ======================================================================= -->
<!-- Begin: D:MO2. M:MO2b. Desktop: Module text left. Image right. Mobile: Module text full width. No right image. -->
<tr>
<td align="left" valign="top">
<table class="D_MO2__M_MO2b" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top">
<table class="D_MO2__M_MO2b_text" width="342" border="0" cellspacing="0" cellpadding="0">
<tr class="mhide">
<td width="17" height="26"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
<tr>
<td><!-- col spacer --></td>
<td align="left" valign="top"><font color="#524940" size="2" face="Arial, Helvetica, sans-serif" class="fontResize" style="line-height:1.4em;"><font color="#C41230" size="4" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_subhead"><strong>D:MO2. M:MO2b.</strong></font><br />
<br />
Desktop: Module text left. Image right.<br />
Mobile: Module text only. No image.<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<!-- Footnote 01 --><a href="#footnote_01" style="text-decoration:none;"><font color="#524940" size="1"><sup><strong style="font-weight:normal;">1</strong></sup></font></a><!-- /Footnote 01 --> Pellentesque ut odio in dui volutpat tincidunt. Integer massa mauris, pretium eget risus at, congue rutrum quam.
<!-- Begin: Desktop: In-line text link. Mobile: CTA button, Flat or Beveled
Note: Use either Flat Mobile CTA Button or Beveled Mobile CTA Button. Delete the other you are not using. -->
<!-- Begin: Desktop: In-line text link. Mobile: CTA button, Flat red -->
<a name="#" href="http://www.bankofamerica.com" target="_blank" class="dtext_mctabtn" style="color:#012169; text-decoration:underline;"><!-- add style color:#012169; text-decoration:underline; --><strong style="font-weight: normal; white-space:nowrap;">Text&nbsp;link&nbsp;flat</strong></a>
<!-- End: Desktop: In-line text link. Mobile: CTA button, Flat red -->
<!-- End: Desktop: In-line text link. Mobile: CTA button, Beveled (jelly) red -->
<!-- End: Desktop: In-line text link. Mobile: CTA button, Flat or Beveled -->
</font></td>
</tr>
<tr class="mhide">
<td height="12"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
</table>
</td>
<td align="right" valign="top" class="mhide"><a name="#" href="http://www.bankofamerica.com" target="_blank"><img src="http://placehold.it/183x190" width="183" height="190" border="0" alt="insert link destination description" style="display: block" class="mhide" /></a></td>
</tr>
</table>
<!-- /D_MO2__M_MO2b end -->
</td>
</tr>
<!-- End: D:MO2. M:MO2b. -->
<!-- ======================================================================= -->
<!-- Begin: D:MO3. M:MO3. Desktop: 3 text modules in one row. Mobile: 3 stacked text modules in one column.
Notes: If using vertical keylines, add left and right border in-line CSS to Submodule 2.
At the end of the copy of Submodule 2, add break tags with class="mhide" to accomodate the length of the longest copy of all 3 submodules -->
<tr>
<td align="left" valign="top">
<table class="D_MO3__M_MO3" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" class="element_stack" bgcolor="#ffffff">
<!-- Begin: Submodule 1 -->
<table class="D_MO3__M_MO3_subm1" align="left" width="180" border="0" cellspacing="0" cellpadding="0">
<tr class="mhide">
<td height="26"><!-- top margin --></td>
<td><!-- top margin --></td>
<td><!-- top margin --></td>
</tr>
<tr>
<td width="17" class="mhide"><!-- margin left --></td>
<td align="left" valign="top">
<font color="#524940" size="2" face="Arial, Helvetica, sans-serif" class="fontResize" style="line-height:1.4em;"><font color="#C41230" size="4" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_subhead"><strong>D:MO3. M:MO3. Submodule 1</strong></font><br />
<br />
Keyline Example.<br />
Desktop: 3 text submodules in one row. No images.<br />
Mobile: 3 text submodules in one column. No images.</font></td>
<td width="11" class="mhide"><!-- margin left --></td>
</tr>
<tr class="mhide">
<td height="17"><!-- bottom margin --></td>
<td><!-- bottom margin --></td>
<td><!-- bottom margin --></td>
</tr>
</table>
<!-- End: Submodule 1 -->
<!-- Begin: Submodule 2 -->
<table class="D_MO3__M_MO3_subm2" align="left" width="175" border="0" cellspacing="0" cellpadding="0">
<tr class="mhide">
<td height="26"><!-- top margin --></td>
<td><!-- top margin --></td>
<td><!-- top margin --></td>
</tr>
<tr>
<td width="12" class="mhide" style="border-left: 1px solid #cfcdce;"><!-- margin left --></td>
<td align="left" valign="top">
<font color="#524940" size="2" face="Arial, Helvetica, sans-serif" class="fontResize" style="line-height:1.4em;"><font color="#C41230" size="4" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_subhead"><strong>D:MO3. M:MO3. Submodule 2</strong></font><br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut odio in dui volutpat tincidunt.<br class="mhide" /><br class="mhide" /><br class="mhide" /><br class="mhide" /><!-- If there are vertical keylines, add break tags as needed to make middle submodule the longest of the 3 submodules. --></font></td>
<td width="10" class="mhide" style="border-right: 1px solid #cfcdce;"><!-- margin left --></td>
</tr>
<tr class="mhide">
<td height="17"><!-- bottom margin --></td>
<td><!-- bottom margin --></td>
<td><!-- bottom margin --></td>
</tr>
</table>
<!-- End: Submodule 2 -->
<!-- Begin: Submodule 3 -->
<table class="D_MO3__M_MO3_subm3" align="right" width="171" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr class="mhide">
<td height="26"><!-- top margin --></td>
<td><!-- top margin --></td>
<td><!-- top margin --></td>
</tr>
<tr>
<td width="1" class="mhide"><!-- margin left --></td>
<td align="left" valign="top">
<font color="#524940" size="2" face="Arial, Helvetica, sans-serif" class="fontResize" style="line-height:1.4em;"><font color="#C41230" size="4" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_subhead"><strong>D:MO3. M:MO3. Submodule 3</strong></font><br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut odio in dui volutpat tincidunt. </font></td>
<td width="11" class="mhide"><!-- margin left --></td>
</tr>
<tr class="mhide">
<td height="17"><!-- bottom margin --></td>
<td><!-- bottom margin --></td>
<td><!-- bottom margin --></td>
</tr>
</table>
<!-- End: Submodule 3 -->
</td>
</tr>
</table>
<!-- /D_MO3__M_MO3 end -->
</td>
</tr>
<!-- End: D:MO3. M:MO3. -->
<!-- ======================================================================= -->
<!-- Begin: D:MO4. M:MO4b. Desktop: 3 text modules in one row with images above text modules. Mobile: 3 stacked text modules in one column. Background color example
Notes: If using vertical keylines, add left and right border in-line CSS to Submodule 2.
At the end of the copy of Submodule 2, add break tags with class="mhide" to accomodate the length of the longest copy of all 3 submodules -->
<tr>
<td align="left" valign="top">
<table class="D_MO4__M_MO4b" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="mhide">
<td align="left" valign="top" bgcolor="#ffffff">
<table class="D_MO4__M_MO4b_subm_images" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a name="#" href="http://www.bankofamerica.com" target="_blank"><img src="http://placehold.it/183x90" width="183" height="90" border="0" alt="insert link destination description" style="display: block" /></a></td>
<td><a name="#" href="http://www.bankofamerica.com" target="_blank"><img src="http://placehold.it/183x90" width="183" height="90" border="0" alt="insert link destination description" style="display: block" /></a></td>
<td><a name="#" href="http://www.bankofamerica.com" target="_blank"><img src="http://placehold.it/183x90" width="183" height="90" border="0" alt="insert link destination description" style="display: block" /></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top" class="element_stack" bgcolor="#ffffff">
<!-- Begin: Submodule 1 -->
<table class="D_MO4__M_MO4b_subm1" align="left" width="183" border="0" cellspacing="0" cellpadding="0" style="margin:0 !important; padding: 0 !important;">
<tr>
<td valign="top">
<table class="D_MO4__M_MO4b_subm1_text_wrapper" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="mhide">
<td height="26"><!-- top margin --></td>
<td><!-- top margin --></td>
<td><!-- top margin --></td>
</tr>
<tr>
<td width="17" class="mhide"><!-- margin left --></td>
<td width="140" align="left" valign="top" class="D_MO4__M_MO4b_subm1_text">
<font color="#524940" size="2" face="Arial, Helvetica, sans-serif" class="fontResize" style="line-height:1.4em;"><font color="#C41230" size="4" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_subhead"><strong>D:MO4. M:MO4b. Submodule 1</strong></font><br />
<br />
Desktop: 1st row, 3 images. 2nd row, 3 text submodules.<br />
Mobile: 3 text submodules in one column. No images.</font></td>
<td width="11" class="mhide"><!-- margin left --></td>
</tr>
<tr class="mhide">
<td height="17"><!-- bottom margin --></td>
<td><!-- bottom margin --></td>
<td><!-- bottom margin --></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End: Submodule 1 -->
<!-- Begin: Submodule 2 -->
<table class="D_MO4__M_MO4b_subm2" align="left" width="183" border="0" cellspacing="0" cellpadding="0" bgcolor="#ece6dd" style="margin:0 !important; padding: 0 !important;">
<tr>
<td valign="top">
<table class="D_MO4__M_MO4b_subm2_text_wrapper" align="left" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="mhide">
<td height="26"><!-- top margin --></td>
<td><!-- top margin --></td>
<td><!-- top margin --></td>
</tr>
<tr>
<td width="12" class="mhide"><!-- margin left --></td>
<td width="140" align="left" valign="top" class="D_MO4__M_MO4b_subm2_text">
<font color="#524940" size="2" face="Arial, Helvetica, sans-serif" class="fontResize" style="line-height:1.4em;"><font color="#C41230" size="4" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_subhead"><strong>D:MO4. M:MO4b. Submodule 2</strong></font><br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut odio in dui volutpat tincidunt.<br class="mhide" /><br class="mhide" /><br class="mhide" /><br class="mhide" /><!-- Add break tags as needed to make middle submodule the longest of the 3 submodules. --></font></td>
<td width="10" class="mhide"><!-- margin left --></td>
</tr>
<tr class="mhide">
<td height="17"><!-- bottom margin --></td>
<td><!-- bottom margin --></td>
<td><!-- bottom margin --></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End: Submodule 2 -->
<!-- Begin: Submodule 3 -->
<table class="D_MO4__M_MO4b_subm3" align="right" width="160" border="0" cellspacing="0" cellpadding="0" style="margin:0 !important; padding: 0 !important;">
<tr>
<td valign="top">
<table class="D_MO4__M_MO4b_subm3_text_wrapper" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="mhide">
<td height="26"><!-- top margin --></td>
<td><!-- top margin --></td>
<td><!-- top margin --></td>
</tr>
<tr>
<td width="1" class="mhide"><!-- margin left --></td>
<td width="140" align="left" valign="top" class="D_MO4__M_MO4b_subm3_text">
<font color="#524940" size="2" face="Arial, Helvetica, sans-serif" class="fontResize" style="line-height:1.4em;"><font color="#C41230" size="4" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_subhead"><strong>D:MO4. M:MO4b. Submodule 3</strong></font><br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut odio in dui volutpat tincidunt. Integer massa mauris, pretium eget risus at, congue rutrum quam.</font></td>
<td width="11" class="mhide"><!-- margin left --></td>
</tr>
<tr class="mhide">
<td height="17"><!-- bottom margin --></td>
<td><!-- bottom margin --></td>
<td><!-- bottom margin --></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End: Submodule 3 -->
</td>
</tr>
</table>
<!-- /D_MO4__M_MO4a end -->
</td>
</tr>
<!-- End: D:MO4. M:MO4b. -->
<!-- ======================================================================= -->
<!-- Begin: D:MO5. M:MO5. Module_text_only -->
<tr>
<td align="left" valign="top"><table class="D_MO5__M_MO5" width="532" border="0" cellspacing="0" cellpadding="0">
<tr class="mhide">
<td width="17" height="26"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
<tr>
<td><!-- col spacer --></td>
<td align="left" valign="top"><font color="#524940" size="2" face="Arial, Helvetica, sans-serif" class="fontResize"><font color="#C41230" size="4" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_subhead"><strong>D:MO5. M:MO5. Module text only.</strong></font><br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<!-- Footnote 01 --><a href="#footnote_01" style="text-decoration:none;"><font color="#524940" size="1"><sup><strong style="font-weight:normal;">1</strong></sup></font></a><!-- /Footnote 01 --> Pellentesque ut odio in dui volutpat tincidunt. Integer massa mauris, pretium eget risus at, congue rutrum quam.<br class="mhide"/>
<ul class="mulist">
<li><font color="#C41230"><strong>Call <span class="mobile_nolink_red">800.123.4567</span></strong></font></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Donec in lectus viverra, sodales ipsum in, sagittis magna.</li>
</ul>
</font></td>
</tr>
<tr class="mhide">
<td height="12"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
</table>
<!-- /D_MO5__M_MO5 end --></td>
</tr>
<!-- End: D:MO5. M:MO5. -->
<!-- ======================================================================= -->
<!-- Begin: D:MO10. M:MO10a. Module text left. Image right. -->
<!-- Mobile: If different, set path in CSS. If same image as desktop, set new image size in CSS as background-size. -->
<tr>
<td align="left" valign="top">
<table class="D_MO10__M_MO10a" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top">
<table class="D_MO10__M_MO10a_text" width="175" border="0" cellspacing="0" cellpadding="0">
<tr class="mhide">
<td width="17" height="26"><!-- top corner margin --></td>
<td><!-- top row margin --></td>
<td width="12"><!-- top corner margin --></td>
</tr>
<tr>
<td><!-- col spacer --></td>
<td align="left" valign="top"><font color="#524940" size="2" face="Arial, Helvetica, sans-serif" class="fontResize" style="line-height:1.4em;"><font color="#C41230" size="4" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_subhead"><strong>D:MO10. M:MO10a.</strong></font><br />
<br />
Desktop: Module text left. Image right.<br />
Mobile: Module text left. Image right. </font></td>
<td class="mhide">&nbsp;</td>
</tr>
<tr class="mhide">
<td height="12"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
<td><!-- corner spacer --></td>
</tr>
</table>
</td>
<td align="right" valign="top" class="side_image_wrapper" style="white-space: nowrap;"><a name="#" href="http://www.bankofamerica.com" target="_blank"><span class="D_MO10__M_MO10a_image"><img src="http://placehold.it/367x190" width="367" height="190" border="0" alt="insert link destination description" style="display: block" class="mhide" /></span></a></td>
</tr>
</table>
<!-- /D_MO10__M_MO10a end -->
</td>
</tr>
<!-- End: D:MO10. M:MO10a. -->
<!-- ======================================================================= -->
<!-- Begin: D:MO21. M:MO21a. Desktop: 2 text modules in one row. Mobile: 2 stacked text modules in one column.
Notes: If using vertical keylines, add right border in-line CSS to Submodule 1.
At the end of the copy of Submodule 1, add break tags with class="mhide" to accomodate the length of the longest copy of both submodules -->
<tr>
<td align="left" valign="top">
<table class="D_MO21__M_MO21a" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="mhide">
<td height="26" bgcolor="#ffffff">&nbsp;<!-- top margin --></td>
</tr>
<tr>
<td align="left" valign="top" bgcolor="#ffffff">
<table class="D_MO21__M_MO21_subm1" align="left" width="49%" border="0" cellspacing="0" cellpadding="0" style="border-right: 1px solid #cfcdce;">
<tr>
<td width="17" class="mhide"><!-- margin left --></td>
<td align="left" valign="top" class="D_MO21__M_MO21_subm1_content">
<font color="#524940" size="2" face="Arial, Helvetica, sans-serif" class="fontResize" style="line-height:1.4em;"><font color="#C41230" size="4" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_subhead"><strong>D:MO21. M:MO21a. Submodule 1</strong></font><br />
<br />
Keyline Example.<br />
Desktop: 2 text submodules in one row. No images.<br />
Mobile: 2 text submodules in one column. No images.
<br class="mhide" /><br class="mhide" /><!-- Add break tags as needed to accomodate the longest of the 2 submodules. --></font></td>
<td width="23" class="mhide"><!-- margin left --></td>
</tr>
</table>
<table class="D_MO21__M_MO21_subm2" align="right" width="45%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" class="mhide"><!-- margin left --></td>
<td align="left" valign="top">
<font color="#524940" size="2" face="Arial, Helvetica, sans-serif" class="fontResize" style="line-height:1.4em;"><font color="#C41230" size="4" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_subhead"><strong>D:MO21. M:MO21a. Submodule 2</strong></font><br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut odio in dui volutpat tincidunt. Integer massa mauris, pretium eget risus at, congue rutrum quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </font></td>
<td width="17" class="mhide"><!-- margin left --></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="17" bgcolor="#ffffff"><!-- bottom margin --></td>
</tr>
</table>
<!-- /D_MO21__M_MO21a end -->
</td>
</tr>
<!-- End: D:MO21. M:MO21a. -->
<!-- ======================================================================= -->
<!-- Begin: D:MO24. M:MO24. Desktop: 2 text modules in one row with images above each module. Mobile: 2 stacked text modules with images above each in one column.
Notes: If using vertical keylines, add right border in-line CSS to Submodule 1.
At the end of the copy of Submodule 1, add break tags with class="mhide" to accomodate the length of the longest copy of both submodules -->
<tr>
<td align="left" valign="top">
<table class="D_MO24__M_MO24" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="mhide">
<td align="left" valign="top" bgcolor="#ffffff">
<table clas="D_MO24__M_MO24_subm_images" align="left" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="top"><a name="#" href="http://www.bankofamerica.com" target="_blank"><img src="http://placehold.it/275x90" width="275" height="90" border="0" alt="insert link destination description" style="display: block" /></a></td>
<td align="top"><a name="#" href="http://www.bankofamerica.com" target="_blank"><img src="http://placehold.it/274x90" width="274" height="90" border="0" alt="insert link destination description" style="display: block" /></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top" bgcolor="#ffffff">
<table class="D_MO24__M_MO24_subm1" align="left" width="46%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<table class="D_MO24__M_MO24_subm1_text_wrapper" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="26" class="mhide"><!-- spacer --></td>
<td class="D_MO24__M_MO24_subm1_image_wrapper"><a name="#" href="http://www.bankofamerica.com" target="_blank"><span class="D_MO24__M_MO24_subm_image"></span></a></td>
<td class="mhide"><!-- spacer --></td>
</tr>
<tr>
<td width="17" class="mhide"><!-- margin left --></td>
<td align="left" valign="top" class="D_MO24__M_MO24_subm1_text">
<font color="#524940" size="2" face="Arial, Helvetica, sans-serif" class="fontResize" style="line-height:1.4em;"><font color="#C41230" size="4" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_subhead"><strong>D:MO24. M:MO24a. Submodule 1</strong></font><br />
<br />
Background Color Example.<br />
Desktop: 2 images in 1st row. 2 text submodules in 2nd row. <br />
Mobile: 2 stacking image and text submodules stack into one column.
<br class="mhide" /><br class="mhide" /><!-- Add break tags as needed to accomodate the longest of the 2 submodules. --></font></td>
<td width="1" class="mhide"><!-- margin right --></td>
</tr>
<tr class="mhide">
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="D_MO24__M_MO24_subm2" align="right" width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<table class="D_MO24__M_MO24_subm2_text_wrapper" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ece6dd">
<tr>
<td height="26" class="mhide"><!-- spacer --></td>
<td class="D_MO24__M_MO24_subm2_image_wrapper"><a name="#" href="http://www.bankofamerica.com" target="_blank"><span class="D_MO24__M_MO24_subm_image"></span></a></td>
<td class="mhide"><!-- spacer --></td>
</tr>
<tr>
<td width="23" class="mhide"><!-- margin left --></td>
<td align="left" valign="top" class="D_MO24__M_MO24_subm2_text">
<font color="#524940" size="2" face="Arial, Helvetica, sans-serif" class="fontResize" style="line-height:1.4em;"><font color="#C41230" size="4" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_subhead"><strong>D:MO24. M:MO24a. Submodule 2</strong></font><br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br class="mhide" /><br class="mhide" /><br class="mhide" /><br class="mhide" /><br class="mhide" /><br class="mhide" /><!-- Add break tags as needed to accomodate the longest of the 2 submodules. --></font></td>
<td width="17" class="mhide"><!-- margin left --></td>
</tr>
<tr>
<td class="mhide">&nbsp;</td>
<td align="left" valign="top">&nbsp;</td>
<td class="mhide">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- /D_MO24__M_MO24a end -->
</td>
</tr>
<!-- End: D:MO24. M:MO24a. -->
<!-- ======================================================================= -->
<!-- Begin: D:MO27. M:MO27. Left side icon and text -->
<tr>
<td align="left" valign="top" bgcolor="#ece6dd">
<table class="D_MO27__M_MO27" width="532" border="0" cellspacing="0" cellpadding="0">
<tbody><tr class="mhide">
<td width="17" height="26"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
<tr>
<td><!-- col spacer --></td>
<td align="left" valign="top"><font color="#524940" size="2" face="Arial, Helvetica, sans-serif" class="fontResize" style="line-height:1.4em;"><font color="#C41230" size="4" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_subhead"><strong>D:MO27. M:MO27. Left side icon and text.</strong></font><br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<!-- Footnote 01 --><a href="#footnote_01" style="text-decoration:none;"><font color="#524940" size="1"><sup><strong style="font-weight:normal;">1</strong></sup></font></a><!-- /Footnote 01 --> Pellentesque ut odio in dui volutpat tincidunt. Integer massa mauris, pretium eget risus at, congue rutrum quam.</font></td>
</tr>
<tr>
<td height="15"><!-- spacer --></td>
<td><!-- spacer --></td>
</tr>
<tr>
<td><!-- spacer --></td>
<td align="left" valign="top" class="icon_text_wrapper">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td width="77" align="left" valign="top" class="icon_left"><a name="#" href="http://www.bankofamerica.com" target="_blank"><img src="http://placehold.it/68x68" alt="insert link destination description" width="68" height="68" border="0" style="display: block" /></a></td>
<td align="left" valign="top"><font color="#e31837" size="3" face="Arial, Helvetica, sans-serif" class="fontResizeBody" style="line-height:1.4em;"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></font><br />
<font color="#524940" size="2" face="Arial, Helvetica, sans-serif" style="line-height:1.4em;"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></font>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr class="mhide">
<td height="20"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
</tbody></table><!-- /D_MO27__M_MO27 end -->
</td>
</tr>
<!-- End: D:MO27. M:MO27. -->
<!-- End: Module Options ======================================================================= -->
</table>
<!-- End: table id=middle_content_modules -->
</td>
</tr>
<!-- Begin: CTA Modules ======================================================================= -->
<!-- Select only one -->
<tr>
<td align="left" valign="top">
<!-- ======================================================================= -->
<!-- Begin: D:CTA3. M:CTA3. One CTA -->
<table id="D_CTA3__M_CTA3" width="532" border="0" cellspacing="0" cellpadding="0">
<tr class="mhide">
<td width="17" height="26"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
<tr>
<td><!-- col spacer --></td>
<td align="left" valign="top">
<!-- Begin CTA Button.
Note: Use either Flat CTA Button or Beveled CTA Button. Delete the other you are not using. -->
<!-- Begin Flat CTA Button. -->
<table id="CTA_button_flat" width="200" border="0" cellspacing="0" cellpadding="0" >
<tbody>
<tr>
<td align="center" valign="middle" bgcolor="#C41230" height="40" class="CTA_button_flat_td"><!-- When changing button color, change bgcolor property. --><font color="#ffffff" size="2" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_CTA"><a name="#" href="http://www.bankofamerica.com" target="_blank" class="cta_text" style="color:#ffffff; padding:10px 40px 10px 40px; text-align:center; text-decoration:none;"><!-- add color:#ffffff; padding:10px 40px 10px 40px; text-align:center; text-decoration:none; --><strong style="white-space:nowrap;">D_CTA3__M_CTA3</strong></a></font></td>
</tr>
</tbody>
</table>
<!-- End Flat CTA Button. -->
<!-- Begin: CTA Button: Beveled. Default Red CTA on White BG -->
<table class="CTA_button_beveled" width="200" border="0" cellpadding="0" cellspacing="0" background="images/00000_cta_btn_red_on_white_mid.gif" bgcolor="#C41230" style="display:none; max-width:0px; max-height:0px; line-height:0px; font-size:0px; overflow:hidden; mso-hide:all"><!-- To enable Beveled CTA Button, remove style property. When changing button color, change bgcolor property. -->
<tr>
<td width="8" height="32" valign="top"><img src="images/00000_cta_btn_left_white_bg.png" width="8" height="32" border="0" alt="" style="display:block;"></td>
<!-- Adjust left and right padding according to length of CTA link text. -->
<td align="center" height="32" valign="middle" class="cta_mid"><a name="#" href="http://www.bankofamerica.com" target="_blank" style="text-decoration:none; display: block; "><!-- style text-decoration:none; display: block; --><font color="#ffffff" size="2" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;"><strong>D_CTA3__M_CTA3</strong></font></a></td>
<td width="7" height="32" valign="top"><img src="images/00000_cta_btn_right_white_bg.png" width="7" height="32" border="0" alt="" style="display:block;"></td>
</tr>
</table>
<!-- End: CTA Button: Beveled. -->
<!-- End CTA Button. -->
</td>
</tr>
<tr class="mhide">
<td height="23"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
</table>
<!-- End: D:CTA3. M:CTA3. -->
<!-- ======================================================================= -->
<!-- Begin: D:CTA10. M:CTA10. Desktop: One CTA on left. Text on right. Mobile: One CTA on top. Text below. -->
<table ID="D_CTA10__M_CTA10" width="532" border="0" cellspacing="0" cellpadding="0">
<tr class="mhide">
<td width="17" height="26"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
<tr>
<td><!-- col spacer --></td>
<td align="left" valign="top">
<table id="CTAs_bottom" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="cta_row">
<td align="left" valign="top" class="cta_stack">
<!-- Begin CTA Button.
Notes:
1. Use either Flat CTA Button or Beveled CTA Button. Delete the other you are not using.
2. These are aligned left -->
<!-- Begin Flat CTA Button. -->
<table id="CTA_button_flat" align="left" width="200" border="0" cellspacing="0" cellpadding="0" >
<tbody>
<tr>
<td align="center" valign="middle" bgcolor="#C41230" height="40" class="CTA_button_flat_td"><!-- When changing button color, change bgcolor property. --><font color="#ffffff" size="2" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize_CTA"><a name="#" href="http://www.bankofamerica.com" target="_blank" class="cta_text" style="color:#ffffff; padding:10px 40px 10px 40px; text-align:center; text-decoration:none;"><!-- add color:#ffffff; padding:10px 40px 10px 40px; text-align:center; text-decoration:none; --><strong style="white-space:nowrap;">D_CTA3__M_CTA3</strong></a></font></td>
</tr>
</tbody>
</table>
<!-- End Flat CTA Button. -->
<!-- Begin: CTA Button: Beveled. Default Red CTA on White BG -->
<table class="CTA_button_beveled" align="left" width="200" border="0" cellpadding="0" cellspacing="0" background="images/00000_cta_btn_red_on_white_mid.gif" bgcolor="#C41230"style="display:none; max-width:0px; max-height:0px; line-height:0px; font-size:0px; overflow:hidden; mso-hide:all"><!-- To enable Beveled CTA Button, remove style property. When changing button color, change bgcolor property. -->
<tr>
<td width="8" height="32" valign="top"><img src="images/00000_cta_btn_left_white_bg.png" width="8" height="32" border="0" alt="" style="display:block;"></td>
<!-- Adjust left and right padding according to length of CTA link text. -->
<td align="center" height="32" valign="middle" class="cta_mid"><a name="#" href="http://www.bankofamerica.com" target="_blank" style="text-decoration:none; display: block; "><!-- style text-decoration:none; display: block; --><font color="#ffffff" size="2" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;"><strong>Customizable&nbsp;CTA</strong></font></a></td>
<td width="7" height="32" valign="top"><img src="images/00000_cta_btn_right_white_bg.png" width="7" height="32" border="0" alt="" style="display:block;"></td>
</tr>
</table>
<!-- End: CTA Button: Beveled. -->
<!-- End CTA Button. -->
<table id="D_CTA10__M_CTA10_text_CTA" align="right" width="295" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="cta_bottom_text"><font color="#524940" size="2" face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none;" class="fontResize"><a name="#" href="http://www.bankofamerica.com" target="_blank" style="color:#012169; text-decoration:underline;"><!-- add style color:#012169; text-decoration:underline; --><strong style="font-weight: normal;">D:CTA10. M:CTA10-CCB1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut odio in dui.</strong></a></font></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr class="mhide">
<td height="23"><!-- corner spacer --></td>
<td><!-- row spacer --></td>
</tr>
</table>
<!-- End: D:CTA10. M:CTA10. -->
<!-- ======================================================================= -->
</td>
</tr>
<!-- End: CTA Modules ======================================================================= -->
<!-- Begin: SG1 -->
<tr>
<td bgcolor="#C41230"><img src="images/00000_retail_footer_supergraphic.gif" width="549" height="37" alt="" style="display:block;" class="footer_supergraphic" /></td>
</tr>
<!-- End: SG1 -->
</table>
</td>
<td width="1" bgcolor="#cfcdce" class="mhide"><!-- border right --></td>
</tr>
<tr class="mhide">
<td bgcolor="#cfcdce" height="1" style="font-size: 1px; line-height: 1%; mso-line-height-rule: exactly;">&nbsp;<!-- border left bottom corner --></td>
<td bgcolor="#cfcdce" style="font-size: 1px; line-height: 1%; mso-line-height-rule: exactly;">&nbsp;<!-- border bottom corner --></td>
<td bgcolor="#cfcdce" style="font-size: 1px; line-height: 1%; mso-line-height-rule: exactly;">&nbsp;<!-- border right bottom corner --></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top"><table id="footer_content_wrap" width="551" cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="10"><!--row space--></td>
</tr>
<tr>
<td align="left"><div style="line-height:1.0em;" class="footer_disclosures">
<table cellspacing="0" cellpadding="0" id="footer_disclaimers_copy_table" border="0">
<!-- Begin: Footnote Number/Symbol Index Module -->
<tr>
<td width="5" align="left" valign="top"><font face="Arial, Helvetica, sans-serif" size="1" color="#524940" class="fontResize_footer">
<!-- Footnote 01 --><a name="footnote_01"></a><sup>1</sup><!-- /Footnote 01 -->
</font></td>
<td align="left" valign="top"><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="4" style="font-size: 1px; line-height: 1%; mso-line-height-rule: exactly;">&nbsp;<!-- spacer --></td>
</tr>
<tr>
<td align="left" valign="top"><font face="Arial, Helvetica, sans-serif" size="1" color="#524940" class="fontResize_footer">Footnote index. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lectus viverra, sodales ipsum in, sagittis magna. Mauris at risus tellus. In rhoncus ipsum et quam malesuada tristique. Praesent blandit rhoncus est id scelerisque. Aliquam dignissim mollis magna ut rhoncus. Praesent eget accumsan est, a porta tellus. Fusce egestas molestie tortor ut condimentum. Integer metus urna, euismod eget placerat at, tristique sed diam. Suspendisse potenti. Quisque porta sodales ligula id egestas.</font></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" valign="top" style="font-size: 1px; line-height: 1%; mso-line-height-rule: exactly;">&nbsp;<!-- spacer --></td>
<td height="7" style="font-size: 1px; line-height: 1%; mso-line-height-rule: exactly;">&nbsp;<!-- spacer --></td>
</tr>
<!-- End: Footnote Number/Symbol Index Module -->
<!-- Begin: Footer Disclaimer Module -->
<!-- Use break tags between paragraphs. -->
<tr>
<td width="5" align="left" valign="top"><!-- spacer --></td>
<td align="left" valign="top"><font face="Arial, Helvetica, sans-serif" size="1" color="#524940" class="fontResize_footer">Footer disclaimer. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lectus viverra, sodales ipsum in, sagittis magna. Mauris at risus tellus. In rhoncus ipsum et quam malesuada tristique. Praesent blandit rhoncus est id scelerisque. Aliquam dignissim mollis magna ut rhoncus. Praesent eget accumsan est, a porta tellus. Fusce egestas molestie tortor ut condimentum. Integer metus urna, euismod eget placerat at, tristique sed diam. Suspendisse potenti. Quisque porta sodales ligula id egestas.</font></td>
</tr>
<!-- End: Footer Disclaimer Module -->
<tr>
<td height="0" class="disclosures_bottom_margin"><!-- If bgcolor of "td" with class="main_body_wrapper" is not white (#ffffff), then height="23" of "td" with class="disclosures_bottom_margin", else height="0" --></td>
<td><!-- spacer --></td>
</tr>
</table>
</div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" valign="top"><div style="line-height:1.0em;" class="footer_disclosures">
<table width="551" cellspacing="0" cellpadding="0" id="bac_standard_footer" border="0">
<tr>
<td class="mhide"><!-- --></td>
<td height="23"><!-- --></td>
</tr>
<tr>
<td width="5" align="left" valign="top"><!-- spacer --></td>
<td align="left" valign="top"><e:footer />
<!-- Begin: Remove before delivery -->
<font face="Arial, Helvetica, sans-serif" size="2" color="#524940">
BAC standard marketing/servicing footer disclaimer. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</font>
<!-- End: Remove before delivery -->
</td>
</tr>
<tr>
<td><!-- spacer --></td>
<td align="left" valign="top">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20"><!-- spacer --></td>
</tr>
<tr>
<td align="left" valign="top"><font face="Arial, Helvetica, sans-serif" size="1" color="#524940" class="fontResize_footer">ARXXXXXX/XXXXXX </font></td>
</tr>
</table>
</td>
</tr>
</table>
</div></td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment