Preheaders

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, and optionally icons colour.

  • Background colour — change the HEX colour inside bgcolor="" on the parent row table
  • Links — change the colour with inline CSS
  • Icons — use icons that contrast with the new background colour you've just set
  • Top/bottom inner spacing — change the value in the height="" attribute, as well as the font-size and line-height CSS values, on the spacer <td>
NOTE: if using more than two columns inside the spacer, you need to adjust the colspan="2" attribute value on the spacers. If you use a single column, you can remove this attribute. Find out more in the framework Spacer docs.