Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <head>
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="date=no" name="format-detection">
<meta content="address=no" name="format-detection">
<meta content="telephone=no" name="format-detection">

<title>
      Email Template
    </title>
<style media="screen" type="text/css">
@media only screen and (max-width: 480px) {
    div[class="mobile-br-1"] {
        height: 1px !important;
        background: #333 !important;
        display: block !important;
        margin: 0 auto !important;
        width: 28px !important
        }
    div[class="mobile-br-5"] {
        height: 5px !important
        }
    div[class="mobile-br-10"] {
        height: 10px !important
        }
    div[class="mobile-br-15"] {
        height: 15px !important
        }
    th[class="m-td"], td[class="m-td"], div[class="hide-for-mobile"], span[class="hide-for-mobile"] {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        min-height: 0 !important
        }
    span[class="mobile-block"] {
        display: block !important
        }
    div[class="img-m-center"] {
        text-align: center !important
        }
    div[class="text-footer-l"], div[class="text-footer-r"], td[class="text-footer-l"], td[class="text-footer-r"] {
        text-align: center !important
        }
    td[class="text-top"], div[class="text-top"] {
        font-size: 11px !important;
        line-height: 16px !important
        }
    td[class="text-nav"], div[class="text-nav"] {
        font-size: 18px !important;
        line-height: 26px !important
        }
    td[class="h2"], div[class="h2"] {
        font-size: 22px !important;
        line-height: 26px !important
        }
    td[class="text"], div[class="text"] {
        font-size: 14px !important;
        line-height: 22px !important
        }
    td[class="h1"], div[class="h1"] {
        font-size: 32px !important;
        line-height: 38px !important
        }
    td[class="text-amount"], div[class="text-amount"] {
        font-size: 38px !important;
        line-height: 43px !important
        }
    td[class="text-cart-item"], div[class="text-cart-item"] {
        font-size: 18px !important;
        line-height: 23px !important
        }
    div[class="fluid-img"] img, td[class="fluid-img"] img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important
        }
    td[class="footer-logo"] img {
        width: 190px !important;
        height: auto !important
        }
    td[class="product-img"] img {
        width: 120px !important;
        height: auto !important
        }
    td[class="product-img"] {
        width: 120px
        }
    table[class="mobile-shell"] {
        width: 100% !important;
        min-width: 100% !important
        }
    table[class="center"] {
        margin: 0 auto
        }
    th[class="column-top"], th[class="column"] {
        float: left !important;
        width: 100% !important;
        display: block !important
        }
    td[class="td"] {
        width: 100% !important;
        min-width: 100% !important
        }
    td[class="wauto"] {
        width: auto !important
        }
    td[class="content-spacing"] {
        width: 15px !important
        }
    }
</style>
</head>
<body style="padding:0;margin:0;display:block;min-width:100%;width:100%;background:#efefef;-webkit-text-size-adjust:none">
<table bgcolor="#efefef" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="mobile-shell" width="600">
<tbody><tr>
<td class="td" style="width:600px; min-width:600px; font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; Margin:0"> <!-- Header Bar -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="content-spacing" style="font-size:0pt; line-height:0pt; text-align:left" width="1"></td>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%" width="100%">
<tbody><tr>
<td class="spacer" height="10" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
                            &nbsp;
                          </td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td class="text-top" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600" data-klaviyo-section="0" style="color:#999999; font-family:'Roboto', Arial,sans-serif; font-size:15px; line-height:20px; text-align:center"><table border="0" cellpadding="0" cellspacing="0" class="kmColumnContainer" width="100%">
<tbody>
<tr>
<td class="rowContainer" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="kmTextBlock" width="100%">
<tbody class="kmTextBlockOuter">
<tr>
<td class="kmTextBlockInner" style="" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="kmTextContentContainer" width="100%">
<tbody>
<tr>
<td class="kmTextContent" style="padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;" valign="top">
<div class="text-top" style="color:#eeeeee; font-family:'Roboto', Arial,sans-serif; font-size:15px; line-height:20px; text-align:center">
                                Let us transport you back to your&nbsp;cart &gt;
                              </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table></td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%" width="100%">
<tbody><tr>
<td class="spacer" height="10" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
                            &nbsp;
                          </td>
</tr>
</tbody></table>
</td>
<td class="content-spacing" style="font-size:0pt; line-height:0pt; text-align:left" width="1"></td>
</tr>
</tbody></table>
<!-- END Header Bar -->
<!-- Header -->
<table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%" width="100%">
<tbody><tr>
<td class="spacer" height="26" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
                            &nbsp;
                          </td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td class="content-spacing" style="font-size:0pt; line-height:0pt; text-align:left" width="1"></td>
<td class="img-center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600" data-klaviyo-section="1" style="font-size:0pt; line-height:0pt; text-align:center"><table border="0" cellpadding="0" cellspacing="0" class="kmColumnContainer" width="100%">
<tbody>
<tr>
<td class="rowContainer" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="kmImageBlock" style="min-width:100%" width="100%">
<tbody class="kmImageBlockOuter">
<tr>
<td class="kmImageBlockInner" style="padding:0px;padding-right:0;padding-left:0;" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="kmImageContentContainer" style="min-width:100%" width="100%">
<tbody>
<tr>
<td class="kmImageContent" style="padding:0;" valign="top">
<a href="https://www.beardbrand.com/?_ke=eyJrbF9lbWFpbCI6ICJtYXR0QHJlYWxseWdvb2RlbWFpbHMuY29tIiwgImtsX2NvbXBhbnlfaWQiOiAiaEZBckFqIn0%3D&amp;utm_campaign=Copy+of+Abandoned+Cart%3A+Email+3+%28JD2xuM%29&amp;utm_medium=email&amp;utm_source=Abandoned+Cart" target="_blank" style="color:#f00;text-decoration:none">
<img align="left" alt="logo" class="kmImage" src="https://d3k81ch9hvuctc.cloudfront.net/company/hFArAj/images/93046845-d9c5-41bb-90ec-a952f60c6343.png" style="-ms-interpolation-mode:bicubic;max-width:224px;padding:0;border-width:0;" width="224">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table></td>
<td class="content-spacing" style="font-size:0pt; line-height:0pt; text-align:left" width="1"></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<!-- END Header -->
<!-- Section 1 -->
<table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="content-spacing" style="font-size:0pt; line-height:0pt; text-align:left" width="65"></td>
<td>
<table border="0" cellpadding="0" cellspacing="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%" width="100%">
<tbody><tr>
<td class="spacer" height="50" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
                            &nbsp;
                          </td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="text" data-klaviyo-region="true" data-klaviyo-region-width-pixels="470" data-klaviyo-section="2" style="color:#000000; font-family:'Roboto', Arial,sans-serif; font-size:16px; line-height:26px; text-align:left"><table border="0" cellpadding="0" cellspacing="0" class="kmColumnContainer" width="100%">
<tbody>
<tr>
<td class="rowContainer" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="kmTextBlock" width="100%">
<tbody class="kmTextBlockOuter">
<tr>
<td class="kmTextBlockInner" style="" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="kmTextContentContainer" width="100%">
<tbody>
<tr>
<td class="kmTextContent" style="padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;" valign="top">
<div class="text" style="color:#000000; font-family:'Roboto', Arial,sans-serif; font-size:16px; line-height:26px; text-align:left">Hey Smiles Davis,<br>
<br>
This is just a quick courtesy email to remind you about <a class="link-black-u" href="#" style="color:#f00;text-decoration:none;color: #000001; text-decoration: underline" target="_blank"><strong class="link-black-u" style="color: #000001; text-decoration: underline">your cart</strong></a> which will expire soon. Click below to let us transport you right back where you left off!</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table></td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%" width="100%">
<tbody><tr>
<td class="spacer" height="55" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
                            &nbsp;
                          </td>
</tr>
</tbody></table>
<!-- Button -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="content-spacing" style="font-size:0pt; line-height:0pt; text-align:left" width="38">
                            &nbsp;
                          </td>
<td>
<table bgcolor="#000000" border="0" cellpadding="0" cellspacing="0" style="border-radius: px; " width="100%">
<tbody><tr>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="15">
                                  &nbsp;
                                </td>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%" width="100%">
<tbody><tr>
<td class="spacer" height="19" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
                                        &nbsp;
                                      </td>
</tr>
</tbody></table>
<div class="hide-for-mobile">
<table border="0" cellpadding="0" cellspacing="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%" width="100%">
<tbody><tr>
<td class="spacer" height="10" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
                                          &nbsp;
                                        </td>
</tr>
</tbody></table>
</div>
<table border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td class="img-center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="14" data-klaviyo-section="3" style="font-size:0pt; line-height:0pt; text-align:center"><table border="0" cellpadding="0" cellspacing="0" class="kmColumnContainer" width="100%">
<tbody>
<tr>
<td class="rowContainer" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="kmImageBlock" style="min-width:100%" width="100%">
<tbody class="kmImageBlockOuter">
<tr>
<td class="kmImageBlockInner" style="padding:0px;padding-right:0;padding-left:0;" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="kmImageContentContainer" style="min-width:100%" width="100%">
<tbody>
<tr>
<td class="kmImageContent" style="padding:0;" valign="top">
<img align="left" alt="" class="kmImage" src="https://d3k81ch9hvuctc.cloudfront.net/company/hFArAj/images/0960954b-dfec-4b73-b8b7-ffddd7260651.jpeg" style="-ms-interpolation-mode:bicubic;max-width:14px;padding:0;border-width:0;" width="14">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table></td>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="14"></td>
<td class="text-btn" data-klaviyo-region="true" data-klaviyo-region-width-pixels="280" data-klaviyo-section="4" style="color:#ffffff; font-family:'Roboto', Arial,sans-serif; font-size:16px; line-height:20px; text-align:center; text-transform:uppercase; font-weight:bold"><table border="0" cellpadding="0" cellspacing="0" class="kmColumnContainer" width="100%">
<tbody>
<tr>
<td class="rowContainer" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="kmTextBlock" width="100%">
<tbody class="kmTextBlockOuter">
<tr>
<td class="kmTextBlockInner" style="" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="kmTextContentContainer" width="100%">
<tbody>
<tr>
<td class="kmTextContent" style="padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;" valign="top">
<div class="text-btn" style="color:#ffffff; font-family:'Roboto', Arial,sans-serif; font-size:16px; line-height:20px; text-align:center; text-transform:uppercase; font-weight:bold"><a class="link-white" href="#" style="color:#f00;text-decoration:none;color:#ffffff; text-decoration:none" target="_blank"><span class="link-white" style="color:#ffffff; text-decoration:none">Reclaim my Cart!</span></a></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table></td>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="10"></td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%" width="100%">
<tbody><tr>
<td class="spacer" height="18" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
                                        &nbsp;
                                      </td>
</tr>
</tbody></table>
<div class="hide-for-mobile">
<table border="0" cellpadding="0" cellspacing="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%" width="100%">
<tbody><tr>
<td class="spacer" height="10" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
                                          &nbsp;
                                        </td>
</tr>
</tbody></table>
</div>
</td>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="15">
                                  &nbsp;
                                </td>
</tr>
</tbody></table>
</td>
<td class="content-spacing" style="font-size:0pt; line-height:0pt; text-align:left" width="38">
                            &nbsp;
                          </td>
</tr>
</tbody></table>
<!-- END Button -->
<table border="0" cellpadding="0" cellspacing="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%" width="100%">
<tbody><tr>
<td class="spacer" height="50" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
                            &nbsp;
                          </td>
</tr>
</tbody></table>
<!-- Cart Title -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="h1" data-klaviyo-region="true" data-klaviyo-region-width-pixels="480" data-klaviyo-section="5" style="color:#000000; font-family:'Roboto', Arial,sans-serif; font-size:36px; line-height:40px; text-align:center; font-weight:bold"><table border="0" cellpadding="0" cellspacing="0" class="kmColumnContainer" width="100%">
<tbody>
<tr>
<td class="rowContainer" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="kmTextBlock" width="100%">
<tbody class="kmTextBlockOuter">
<tr>
<td class="kmTextBlockInner" style="" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="kmTextContentContainer" width="100%">
<tbody>
<tr>
<td class="kmTextContent" style="padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;" valign="top">
<div class="h1" style="color:#000000; font-family:'Roboto', Arial,sans-serif; font-size:36px; line-height:40px; text-align:center; font-weight:bold">
                                Your Cart Contents
                              </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table></td>
</tr>
</tbody></table>
<!-- END Cart Title -->
<table border="0" cellpadding="0" cellspacing="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%" width="100%">
<tbody><tr>
<td class="spacer" height="40" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
                            &nbsp;
                          </td>
</tr>
</tbody></table>
<!-- Cart Item Row 2 -->
                      
                      
                      
                      
                      <table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td data-klaviyo-region="true" data-klaviyo-region-width-pixels="470" data-klaviyo-section="6"><table border="0" cellpadding="0" cellspacing="0" class="kmColumnContainer" width="100%">
<tbody>
<tr>
<td class="rowContainer" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="kmTextBlock" width="100%">
<tbody class="kmTextBlockOuter">
<tr>
<td class="kmTextBlockInner" style="" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="kmTextContentContainer" width="100%">
<tbody>
<tr>
<td class="kmTextContent" style="padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="product-img" style="font-size:0pt; line-height:0pt; text-align:center" width="180">
<img alt="" border="0" src="https://cdn.shopify.com/s/files/1/0209/0478/products/TTubBLANK.jpg?v=1529003880" width="180" style="-ms-interpolation-mode:bicubic">
</td>
<td class="content-spacing" style="font-size:0pt; line-height:0pt; text-align:left" width="40">
                                    &nbsp;
                                  </td>
<td>
<div class="text-amount" style="color:#000000; font-family:'Roboto', Arial,sans-serif; font-size:50px; line-height:54px; text-align:left; font-weight:bold">
                                      1x
                                    </div>
<table border="0" cellpadding="0" cellspacing="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%" width="100%">
<tbody><tr>
<td class="spacer" height="14" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
                                          &nbsp;
                                        </td>
</tr>
</tbody></table>
<div class="text-cart-item" style="color:#000000; font-family:'Roboto', Arial,sans-serif; font-size:20px; line-height:24px; text-align:left">
                                      Tea Tree Utility Balm
                                      <br>
</div>
</td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%" width="100%">
<tbody><tr>
<td class="spacer" height="40" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
                                    &nbsp;
                                  </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table></td>
</tr>
</tbody></table>
                      
                      <!-- END Cart Item Row 2 -->
<!-- Button -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="content-spacing" style="font-size:0pt; line-height:0pt; text-align:left" width="38">
                            &nbsp;
                          </td>
<td>
<table bgcolor="#000000" border="0" cellpadding="0" cellspacing="0" style="border-radius: px; " width="100%">
<tbody><tr>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="15">
                                  &nbsp;
                                </td>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%" width="100%">
<tbody><tr>
<td class="spacer" height="19" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
                                        &nbsp;
                                      </td>
</tr>
</tbody></table>
<div class="hide-for-mobile">
<table border="0" cellpadding="0" cellspacing="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%" width="100%">
<tbody><tr>
<td class="spacer" height="10" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
                                          &nbsp;
                                        </td>
</tr>
</tbody></table>
</div>
<table border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td class="img-center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="14" data-klaviyo-section="7" style="font-size:0pt; line-height:0pt; text-align:center"><table border="0" cellpadding="0" cellspacing="0" class="kmColumnContainer" width="100%">
<tbody>
<tr>
<td class="rowContainer" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="kmImageBlock" style="min-width:100%" width="100%">
<tbody class="kmImageBlockOuter">
<tr>
<td class="kmImageBlockInner" style="padding:0px;padding-right:0;padding-left:0;" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="kmImageContentContainer" style="min-width:100%" width="100%">
<tbody>
<tr>
<td class="kmImageContent" style="padding:0;" valign="top">
<img align="left" alt="" class="kmImage" src="https://d3k81ch9hvuctc.cloudfront.net/company/hFArAj/images/cdbc2883-f7fe-4458-9b64-37c0788b48ef.jpeg" style="-ms-interpolation-mode:bicubic;max-width:14px;padding:0;border-width:0;" width="14">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table></td>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="14"></td>
<td class="text-btn" data-klaviyo-region="true" data-klaviyo-region-width-pixels="280" data-klaviyo-section="8" style="color:#ffffff; font-family:'Roboto', Arial,sans-serif; font-size:16px; line-height:20px; text-align:center; text-transform:uppercase; font-weight:bold"><table border="0" cellpadding="0" cellspacing="0" class="kmColumnContainer" width="100%">
<tbody>
<tr>
<td class="rowContainer" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="kmTextBlock" width="100%">
<tbody class="kmTextBlockOuter">
<tr>
<td class="kmTextBlockInner" style="" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="kmTextContentContainer" width="100%">
<tbody>
<tr>
<td class="kmTextContent" style="padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;" valign="top">
<div class="text-btn" style="color:#ffffff; font-family:'Roboto', Arial,sans-serif; font-size:16px; line-height:20px; text-align:center; text-transform:uppercase; font-weight:bold">
<a class="link-white" href="#" style="color:#f00;text-decoration:none;color:#ffffff; text-decoration:none" target="_blank"><span class="link-white" style="color:#ffffff; text-decoration:none">Reclaim my Cart!</span></a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table></td>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="10"></td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%" width="100%">
<tbody><tr>
<td class="spacer" height="18" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
                                        &nbsp;
                                      </td>
</tr>
</tbody></table>
<div class="hide-for-mobile">
<table border="0" cellpadding="0" cellspacing="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%" width="100%">
<tbody><tr>
<td class="spacer" height="10" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
                                          &nbsp;
                                        </td>
</tr>
</tbody></table>
</div>
</td>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="15">
                                  &nbsp;
                                </td>
</tr>
</tbody></table>
</td>
<td class="content-spacing" style="font-size:0pt; line-height:0pt; text-align:left" width="38">
                            &nbsp;
                          </td>
</tr>
</tbody></table>
<!-- END Button -->
<table border="0" cellpadding="0" cellspacing="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%" width="100%">
<tbody><tr>
<td class="spacer" height="60" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
                            &nbsp;
                          </td>
</tr>
</tbody></table>
</td>
<td class="content-spacing" style="font-size:0pt; line-height:0pt; text-align:left" width="65"></td>
</tr>
</tbody></table>
<!-- END Section 1 -->
<!-- Section 11 -->
<table bgcolor="#f6f6f6" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="content-spacing" style="font-size:0pt; line-height:0pt; text-align:left" width="26"></td>
<td>
<table border="0" cellpadding="0" cellspacing="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%" width="100%">
<tbody><tr>
<td class="spacer" height="50" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
                            &nbsp;
                          </td>
</tr>
</tbody></table>
<div class="fluid-img" style="font-size:0pt; line-height:0pt; text-align:left">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td class="footer-logo" data-klaviyo-region="true" data-klaviyo-region-width-pixels="360" data-klaviyo-section="9" valign="top"><table border="0" cellpadding="0" cellspacing="0" class="kmColumnContainer" width="100%">
<tbody>
<tr>
<td class="rowContainer" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="kmImageBlock" style="min-width:100%" width="100%">
<tbody class="kmImageBlockOuter">
<tr>
<td class="kmImageBlockInner" style="padding:0px;padding-right:0;padding-left:0;" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="kmImageContentContainer" style="min-width:100%" width="100%">
<tbody>
<tr>
<td class="kmImageContent" style="padding:0;" valign="top">
<img align="left" alt="footer logo" class="kmImage" src="https://d3k81ch9hvuctc.cloudfront.net/company/hFArAj/images/582d834e-6d46-4b37-af00-144bc2c963d3.png" style="-ms-interpolation-mode:bicubic;max-width:202px;padding:0;border-width:0;" width="202">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div>
<table border="0" cellpadding="0" cellspacing="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%" width="100%">
<tbody><tr>
<td class="spacer" height="55" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
                            &nbsp;
                          </td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" class="center">
<tbody><tr>
<td class="social-ico" data-klaviyo-region="true" data-klaviyo-region-width-pixels="70" data-klaviyo-section="10" style="font-size:0pt; line-height:0pt; text-align:left" width="70"><table border="0" cellpadding="0" cellspacing="0" class="kmColumnContainer" width="100%">
<tbody>
<tr>
<td class="rowContainer" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="kmImageBlock" style="min-width:100%" width="100%">
<tbody class="kmImageBlockOuter">
<tr>
<td class="kmImageBlockInner" style="padding:0px;padding-right:0;padding-left:0;" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="kmImageContentContainer" style="min-width:100%" width="100%">
<tbody>
<tr>
<td class="kmImageContent" style="padding:0;" valign="top">
<a href="https://www.facebook.com/Beardbrand?utm_campaign=Copy+of+Abandoned+Cart%3A+Email+3+%28JD2xuM%29&amp;utm_medium=email&amp;_ke=eyJrbF9lbWFpbCI6ICJtYXR0QHJlYWxseWdvb2RlbWFpbHMuY29tIiwgImtsX2NvbXBhbnlfaWQiOiAiaEZBckFqIn0%3D&amp;utm_source=Abandoned+Cart" target="_blank" style="color:#f00;text-decoration:none">
<img align="left" alt="Facebook" class="kmImage" src="https://d3k81ch9hvuctc.cloudfront.net/company/hFArAj/images/2bbd4b74-4a35-436c-8936-1ebfebe10c7c.png" style="-ms-interpolation-mode:bicubic;max-width:20px;padding:0;border-width:0;" width="20">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table></td>
<td class="social-ico" data-klaviyo-region="true" data-klaviyo-region-width-pixels="70" data-klaviyo-section="11" style="font-size:0pt; line-height:0pt; text-align:left" width="70"><table border="0" cellpadding="0" cellspacing="0" class="kmColumnContainer" width="100%">
<tbody>
<tr>
<td class="rowContainer" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="kmImageBlock" style="min-width:100%" width="100%">
<tbody class="kmImageBlockOuter">
<tr>
<td class="kmImageBlockInner" style="padding:0px;padding-right:0;padding-left:0;" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="kmImageContentContainer" style="min-width:100%" width="100%">
<tbody>
<tr>
<td class="kmImageContent" style="padding:0;" valign="top">
<a href="https://twitter.com/beardbrand?utm_campaign=Copy+of+Abandoned+Cart%3A+Email+3+%28JD2xuM%29&amp;utm_medium=email&amp;_ke=eyJrbF9lbWFpbCI6ICJtYXR0QHJlYWxseWdvb2RlbWFpbHMuY29tIiwgImtsX2NvbXBhbnlfaWQiOiAiaEZBckFqIn0%3D&amp;utm_source=Abandoned+Cart" target="_blank" style="color:#f00;text-decoration:none">
<img align="left" alt="Twitter" class="kmImage" src="https://d3k81ch9hvuctc.cloudfront.net/company/hFArAj/images/85f63e7e-158f-4a2b-ade1-723f013922fa.png" style="-ms-interpolation-mode:bicubic;max-width:20px;padding:0;border-width:0;" width="20">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table></td>
<td class="social-ico" data-klaviyo-region="true" data-klaviyo-region-width-pixels="70" data-klaviyo-section="12" style="font-size:0pt; line-height:0pt; text-align:left" width="70"><table border="0" cellpadding="0" cellspacing="0" class="kmColumnContainer" width="100%">
<tbody>
<tr>
<td class="rowContainer" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="kmImageBlock" style="min-width:100%" width="100%">
<tbody class="kmImageBlockOuter">
<tr>
<td class="kmImageBlockInner" style="padding:0px;padding-right:0;padding-left:0;" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="kmImageContentContainer" style="min-width:100%" width="100%">
<tbody>
<tr>
<td class="kmImageContent" style="padding:0;" valign="top">
<a href="https://instagram.com/beardbrand/?_ke=eyJrbF9lbWFpbCI6ICJtYXR0QHJlYWxseWdvb2RlbWFpbHMuY29tIiwgImtsX2NvbXBhbnlfaWQiOiAiaEZBckFqIn0%3D&amp;utm_campaign=Copy+of+Abandoned+Cart%3A+Email+3+%28JD2xuM%29&amp;utm_medium=email&amp;utm_source=Abandoned+Cart" target="_blank" style="color:#f00;text-decoration:none">
<img align="left" alt="Instagram" class="kmImage" src="https://d3k81ch9hvuctc.cloudfront.net/company/hFArAj/images/1a547e1f-a47e-4982-ac09-b8eef1bdd5e7.png" style="-ms-interpolation-mode:bicubic;max-width:20px;padding:0;border-width:0;" width="20">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table></td>
<td class="social-ico" data-klaviyo-region="true" data-klaviyo-region-width-pixels="20" data-klaviyo-section="13" style="font-size:0pt; line-height:0pt; text-align:left" width="20"><table border="0" cellpadding="0" cellspacing="0" class="kmColumnContainer" width="100%">
<tbody>
<tr>
<td class="rowContainer" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="kmImageBlock" style="min-width:100%" width="100%">
<tbody class="kmImageBlockOuter">
<tr>
<td class="kmImageBlockInner" style="padding:0px;padding-right:0;padding-left:0;" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="kmImageContentContainer" style="min-width:100%" width="100%">
<tbody>
<tr>
<td class="kmImageContent" style="padding:0;" valign="top">
<a href="https://www.youtube.com/c/Beardbrand?utm_campaign=Copy+of+Abandoned+Cart%3A+Email+3+%28JD2xuM%29&amp;utm_medium=email&amp;_ke=eyJrbF9lbWFpbCI6ICJtYXR0QHJlYWxseWdvb2RlbWFpbHMuY29tIiwgImtsX2NvbXBhbnlfaWQiOiAiaEZBckFqIn0%3D&amp;utm_source=Abandoned+Cart" target="_blank" style="color:#f00;text-decoration:none">
<img align="left" alt="YouTube" class="kmImage" src="https://d3k81ch9hvuctc.cloudfront.net/company/hFArAj/images/23255d70-c06d-4bcc-ac7d-3dc1d5b27674.png" style="-ms-interpolation-mode:bicubic;max-width:20px;padding:0;border-width:0;" width="20">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%" width="100%">
<tbody><tr>
<td class="spacer" height="42" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
                            &nbsp;
                          </td>
</tr>
</tbody></table>
</td>
<td class="content-spacing" style="font-size:0pt; line-height:0pt; text-align:left" width="26"></td>
</tr>
</tbody></table>
<!-- END Section 11 -->
<!-- Footer -->
<table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="content-spacing" style="font-size:0pt; line-height:0pt; text-align:left" width="50"></td>
<td>
<table border="0" cellpadding="0" cellspacing="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%" width="100%">
<tbody><tr>
<td class="spacer" height="30" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
                            &nbsp;
                          </td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="text-footer" data-klaviyo-region="true" data-klaviyo-region-width-pixels="400" data-klaviyo-section="14" style="color:#000000; font-family:'Roboto', Arial,sans-serif; font-size:16px; line-height:24px; text-align:center" valign="top"><table border="0" cellpadding="0" cellspacing="0" class="kmColumnContainer" width="100%">
<tbody>
<tr>
<td class="rowContainer" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="kmTextBlock" width="100%">
<tbody class="kmTextBlockOuter">
<tr>
<td class="kmTextBlockInner" style="" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="kmTextContentContainer" width="100%">
<tbody>
<tr>
<td class="kmTextContent" style="padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;" valign="top">
<div class="text-footer" style="color:#000000; font-family:'Roboto', Arial,sans-serif; font-size:16px; line-height:24px; text-align:center">
                                Change your
                                <a class="link-black-u" href="#" style="color:#000;text-decoration:underline;color:#000000; text-decoration:underline" target="_blank"><span class="link-black-u" style="color:#000000; text-decoration:underline">email preferences</span></a> or
                                <a class="link-black-u" href="#" style="color:#000;text-decoration:underline;color:#000000; text-decoration:underline" target="_blank"><span class="link-black-u" style="color:#000000; text-decoration:underline">unsubscribe here</span></a> -
                                <br>
                                no hard feelings!
                                <br>
<br>
<strong>Beardbrand</strong><br>
                                PO Box 13124
                                <br>
                                Austin, TX 78711-3124
                              </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table></td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%" width="100%">
<tbody><tr>
<td class="spacer" height="35" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
                            &nbsp;
                          </td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<th class="column" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; Margin:0" width="204">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="text-footer-l" data-klaviyo-region="true" data-klaviyo-region-width-pixels="204" data-klaviyo-section="15" style="color:#9a9a9a; font-family:'Roboto', Arial,sans-serif; font-size:14px; line-height:20px; text-align:left" valign="top"><table border="0" cellpadding="0" cellspacing="0" class="kmColumnContainer" width="100%">
<tbody>
<tr>
<td class="rowContainer" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="kmTextBlock" width="100%">
<tbody class="kmTextBlockOuter">
<tr>
<td class="kmTextBlockInner" style="" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="kmTextContentContainer" width="100%">
<tbody>
<tr>
<td class="kmTextContent" style="padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;" valign="top">
<div class="text-footer-l" style="color:#9a9a9a; font-family:'Roboto', Arial,sans-serif; font-size:14px; line-height:20px; text-align:left">
                                     &copy; 2018&nbsp;Beardbrand <sup class="sup" style="font-size: 0.6em;line-height: 1;"> &reg; 
                                      </sup>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table></td>
</tr>
</tbody></table>
</th>
<th class="column" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; Margin:0">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="text-footer-r" data-klaviyo-region="true" data-klaviyo-region-width-pixels="204" data-klaviyo-section="16" style="color:#9a9a9a; font-family:'Roboto', Arial,sans-serif; font-size:12px; line-height:22px; text-align:right" valign="top"><table border="0" cellpadding="0" cellspacing="0" class="kmColumnContainer" width="100%">
<tbody>
<tr>
<td class="rowContainer" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="kmTextBlock" width="100%">
<tbody class="kmTextBlockOuter">
<tr>
<td class="kmTextBlockInner" style="" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="kmTextContentContainer" width="100%">
<tbody>
<tr>
<td class="kmTextContent" style="padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;" valign="top">
<div class="text-footer-r" style="color:#9a9a9a; font-family:'Roboto', Arial,sans-serif; font-size:12px; line-height:22px; text-align:right">
                                      With
                                      <img alt="Icon Heart" border="0" height="13" src="https://d3k81ch9hvuctc.cloudfront.net/company/hFArAj/images/images_ico_heart52aa10.jpg" style="-ms-interpolation-mode:bicubic;vertical-align: middle;" valign="middle" width="14"> from Texas and Washingtonm
                                    </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table></td>
</tr>
</tbody></table>
</th>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%" width="100%">
<tbody><tr>
<td class="spacer" height="30" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
                            &nbsp;
                          </td>
</tr>
</tbody></table>
</td>
<td class="content-spacing" style="font-size:0pt; line-height:0pt; text-align:left" width="50"></td>
</tr>
</tbody></table>
<!-- Footer -->
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>



</body>
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console