Overview

The basic structure in MailBox framework is build with wrapper, containers and rows. All these components use HTML tables for markup, in order to provide consistent rendering across email clients.

Rows

The Row in MailBox is a full width table that holds the wrapper and container. It can also be used as a full width table inside wrapper and container.

   <!-- Module 1a -->
   <table class="row" width="100%" align="center" role="presentation">
      <tbody>
         <tr>
            <td align="center" valign="top">
               <!-- Insert Wrapper and Container Here -->
            </td>
         </tr>
      </tbody>
   </table>

Wrapper

The Wrapper in MailBox is a 720px wide table that holds the and container and content. Basically MailBox is build with two containers i.e. wrapper and container.

This 720px-wide, center-aligned table holds the container, grid and rows in place, and defines a fixed width for our emails on desktop and tablets. On mobile, its width is forced to 100% so that our layout doesn’t expand horizontally outside the viewport.

   <!-- Module 1a -->
   <table width="100%" align="center" role="presentation">
      <tbody>
         <tr>
            <td align="center" valign="top">
               <!-- Wrapper 720px Wide -->
               <table class="wrapper" role="presentation">
                  <tbody>
                     <tr>
                        <td align="center" valign="middle">
                           <!-- Add Container Here -->
                        </td>
                     </tr>
                  </tbody>
               </table>
            </td>
         </tr>
      </tbody>
   </table>

Container

This 600px-wide, center-aligned table holds the content, grid and rows in place, and defines a fixed width for our emails on desktop and tablets. On mobile, its width is forced to resize so that our layout doesn’t expand horizontally outside the viewport.

   <!-- Module 1a -->
   <table width="100%" align="center" role="presentation">
      <tbody>
         <tr>
            <td align="center" valign="top">
               <!-- Wrapper 720px -->
               <table class="wrapper" role="presentation">
                  <tbody>
                     <tr>
                        <td align="center" valign="middle">
                           <!-- Wrapper 600px -->
                           <table class="container" role="presentation">
                              <tbody>
                                 <tr>
                                    <td>
                                    <!-- Add Content Here -->
                                    </td>
                                 </tr>
                              </tbody>
                           </table>
                        </td>
                     </tr>
                  </tbody>
               </table>
            </td>
         </tr>
      </tbody>
   </table>