Nice looking layout without using images

From SMTX Wiki
Revision as of 16:53, 10 February 2017 by Smtxwiki (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

The layout below can be used to show emails nicely without the need to include images that are blocked by mail clients.

<!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">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
    </head>
  <body style="font-family: Arial,Helvetica,sans-serif; background-color: #f3f5f6;">
        <table align="center" style="margin: 15px auto 20px; border: 1px solid #d0d0d0; border-image: none; width: 650px; background-color: #ffffff;" cellspacing="0">
            <tbody>
                <tr>
                    <td style="border-width: 1px 1px 10px; border-style: solid; border-color: #046f96 #046f96 #bddfed; text-align: center; color: #ffffff; font-weight: bold; background-color: #046f96;">
                    <br />
                    <br />
                    Header Text
                    </td>
                </tr>
                <tr>
                    <td style="padding: 20px;">
                    #REPLACE-EmailContent#
                    </td>
                </tr>
            </tbody>
        </table>
        <center>
        <div style="font-style: italic;">Footer text</div>
        </center>
        <br />
        <hr />
        <span style="color: gray; font-family: Arial; font-size: 10px;">Disclosure text<!-- </hr> --><br />
        </span>
    </body>
 </html>