Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
HTML Email Hidden Preheader
<style>
/* ... */
/*--- Preheader declaration in style block in addition to inline for Outlook */
.preheader { display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0; }
</style>
</head>
<body>
<!-- PRE-HEADER TEXT -->
<span class="preheader" style="display: none !important; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">Preheader text shows up in GMail, iOS, Mail.app, &amp; more: 75 text char limit</span>
...
@afalchi82

This comment has been minimized.

Copy link

@afalchi82 afalchi82 commented Apr 8, 2014

Did you test this?

@Repox

This comment has been minimized.

Copy link

@Repox Repox commented Apr 15, 2014

This doesn't work very well - tested in Litmus.

@ericlepetit

This comment has been minimized.

Copy link

@ericlepetit ericlepetit commented Apr 7, 2015

I use this. Late in the game but hope that helps:

<td style="display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0; mso-hide:all; line=height:0px; font-size:0px">Your preheader here</td>

Tested in Litmus. Works for me.

Note: I wrap the preheader into a <td> instead of using <span> as <span> seems to increase the Spam Assassin score (https://www.campaignmonitor.com/forums/topic/8131/hidden-preheader-span-scores-20-points-with-spamassassin/)

@kbav

This comment has been minimized.

Copy link
Owner Author

@kbav kbav commented Oct 7, 2015

☝️ @ericlepetit has got it. Use that everybody!

I'll edit my code and test when I get a chance...busy season...

@CEscorcio

This comment has been minimized.

Copy link

@CEscorcio CEscorcio commented Dec 18, 2015

Can´t make it work in Gmail

@iamwerby

This comment has been minimized.

Copy link

@iamwerby iamwerby commented May 9, 2019

Here's the one I use, works perfectly:

<span class="preheader" style="color: #f3f3f3; display: none !important; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; mso-hide: all !important; opacity: 0; overflow: hidden; visibility: hidden;">Preheader text</span>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment