Header
Headers are used to show common branding elements.
Test Results
PassingWant proof? View the test results to see how a header component renders across each of 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.
Set the align attribute on the td to left.Header Centered
Use the code below to create a header with the logo element 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.
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.
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.
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.
Our research showed that logos across various industries averaged between 40 and 60 pixels in height.
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.