Email Kit
Components

Header

Headers are used to show common branding elements.

Paul Sylling

Test Results

Passing

Want proof? View the test results to see how a header component renders across each of the most common email clients.

Email Kit is rigorously tested on the most common email clients.

Usage

Headers are the anchor at the top of every email and generally made up of two sections.

  • Branding: This is a mandatory section that includes a branding element.
  • Links: An optional section that can include links or social media icons.

Common branding elements include a logo or similar image. Learn about adding images in Email Kit.

Examples

Copy the code below and paste it into a table within the #email-container or .panel-container to create a header in your email.

When adding a header component to your email, note the special #header id tag. This takes care of the horiztonal spacing for you. You only need to choose which size of vertical spacing to surround your header with in order to maintain a consistent vertical rhythm.

Header Left-Aligned

Use the code below to create a header with the logo element left-aligned.

Header Left-Aligned
Set the align attribute on the td to left.
Header Centered

Use the code below to create a header with the logo element centered.

Header Centered
Set the align attribute on the td to center.
Header Inside Panel Left-Aligned

Use the code below to create a header inside of the email panel.

Header Inside Panel Left-Aligned
Headers have horizontal spacing built into the component but are surrounded by vertical spacers.
Header Outside Panel Left-Aligned

Use the code below to create a header outside of the email panel.

Header Outside Panel Left-Aligned
Headers have horizontal spacing built into the component but are surrounded by vertical spacers.

Best Practices

Follow these best practices when using headers.

  • Always place the header as the top-most component in your email.
  • Use common branding elements that are found on your other web and digital properties.
  • Use a common header among all of your emails

Frequently Asked Questions

Answers to common questions about headers in Email Kit.

Should I center or left-justify my logo?

Left-justified logos are more easily scanned and provide a better anchor point for the email. If you are including a hero section below the header which is centered, then it is appropriate to consider centering the logo as well.

What is the correct size for my logo?

Our research showed that logos across various industries averaged between 40 and 60 pixels in height.

Is it better to put my logo inside or outside of the email container?

There is no right or wrong answer here. Keep in mind that if you put your logo outside of the email container, it should have a transparent background because it will placed on top of the email background color.