Test Results

Want 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.

Header Centered

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

Header Inside Panel Left-Aligned

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

Header Outside Panel Left-Aligned

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

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.