Email Kit
Components

Preheader

Preheaders are used to show readers a summary of what's in a message.

Paul Sylling

Usage

Most email clients show a preheader to give the reader a summary of the message before they open it. With over 50% of email opens occuring on mobile devices where mailboxes are scanned, it is increasing important that your message stands out.

When writing a preheader, try using one of the following:

  • Call to action
  • Question
  • Personalized introduction
  • Emoji to add some color

Example

Copy the code below and paste it as the first row within the #email-container to create a preheader in your email.

When adding a preheader component to your email, note the special #preheader id tag. This removes it from the email design but still making it visible by the email client and your reader.

Preheader

Use the code below to create a default preheader.

The preheader id tag sets the necessary visibility styles.

Best Practices

Follow these best practices when using preheaders.

  • Always include a preheader or you could end up with unintended content populating this field.
  • Don't repeat what is in the subject line.
  • Limit the content in the preheader to between 50-100 characters.

Frequently Asked Questions

Answers to common questions about preheaders in Email Kit.

What happens if I don't include a preheader?

If you don't include a preheader, email clients will pull the first content it finds causing potentially unintended issues.

How long can a preheader be?

Try and limit your preheader to between 50-100 characters long to ensure your content is visible on both desktop and mobile email clients.