Preheaders

Add useful information above your header

Preheader sections come in two types:

  • Basic
  • Social

They can be used to add aside information above the fold.
The text inside will also show up in the email preview, so you can use them as attention grabbers.


Basic Preheader

The Basic Preheader is made up of two columns with text links inside. If you want, you can replace the two columns with just one (12-col.html from the grid), and use only text.

Example

Social preheader

Social Preheader

The Social Preheader is similar to the Basic one, only that it is more suited for social interaction. It uses contact information links and social media icons, and it is recommended for emails where interaction on social platforms is important.

Example

Social preheader

Customisation

You can easily change the looks of a preheader by changing its background, text, links, and icons.

  • Background colour — change the HEX colour inside bgcolor="" on the parent row table
  • Links — change the HEX colour from the link's inline CSS
  • Icons — use icons that contrast with the new background colour you've just set. Retina icons supported.
  • Top/bottom spacing — change the value in the height="" attribute, as well as the font-size and line-height CSS values, on the <td class="spacer" ...> near the top and bottom of the section
NOTE: if customising a preheader to have more than the original number of columns, you need to adjust the colspan="" attribute value on its top and bottom spacers. The numeric value there must match the new number of columns that you're using. If your customisation uses a single column, you can remove this attribute.

Next Up: Headers →