Layout Module Types

Building a Responsive HTML Email Template: The Modules

Kevin Scholl

After our last post, we now have this nice shell with which to deliver electronic goodness to your recipients. But your content isn’t limited to just a few short words; if it was, you probably wouldn’t be using HTML emails. How do we arrange the content to grab the user’s attention, and optimize their information intake? The answer lies in a few simple – and reusable – layout modules that will make your emails look great and flow well.

Content within these modules can be text of any kind (headings, paragraphs, lists, etc.) or images. We provide for a little padding so that the content doesn’t bump right up to the edge. This padding is generally configured so that outer edges and any gutters between content are equal. This is done with a two-layer nested process; essentially, an outer wrapper and each content block within have half of the desired overall padding. The great aspect of this approach is the possibility for customization.


The simplest of the layout modules, the full-width module is a single space that takes up – you guessed it – the full width of the email (minus padding). This is one of the rare modules that doesn’t require two layers to create the padding. For a complete full-width (for example, a hero image), merely remove the padding entirely.

Get the code here.


This module creates two content blocks side-by-side. By default, each block occupies half the width, but it can be easily modified for uneven widths (for example, a 2/3 content and 1/3 sidebar) by carefully changing the appropriate width values on the tables and wrappers. When the email width is reduced for a smaller screen, the blocks stack vertically.

Get the code here.


Very similar to the 50/50, but this module creates three equal content blocks side-by-side. And like the 50/50, the widths can be manipulated, though it’s not recommended given the smaller size of each. Again, the blocks stack vertically on smaller screens.

Get the code here.


Need to display a grid of partner logos, or small thumbnail images linking to larger photos? This is the module you want! Because the individual content blocks are small, usually this module is reserved for image content. It’s a lot of underlying code, and depending on the dimensions of the grid, some involved math to account for the gutters, but it makes for a nice, condensed presentation. As with any of the multi-column modules, content blocks stack as screen real estate minimizes.

Get the code here.

These basic modules should give you a great start to laying out your HTML emails. Next, we’ll consider the details of the content itself: various text treatments, images, CTA’s, and a whole host of other combinations. Don’t forget to check out our two previous posts in the series here and here. Stay tuned for the next post in this series on the details of responsive HTML emails.