Headers
Headers are essential in HTML emails. They provide clear branding, set the context, and improve user experience. This page showcases different header layouts with varied logo placements and supporting text. Each design serves a purpose and reinforces brand identity.
How to use
To use a header, copy the relevant template code into your HTML email. Each header is responsive and works across most email clients, ensuring consistent appearance on all devices.
When to use
Use a header in every HTML email to ensure brand visibility and provide users with immediate context. Headers are particularly important in official or campaign emails where recognition and trust are critical. Choose a layout that suits the email's purpose and audience—whether formal, promotional or informational—and make sure it aligns with your organisation's brand guidelines.
Logo on the left
A traditional layout with the logo on the left. Easy to recognise and navigate.
Logo on the right
A modern variation with the logo on the right. This layout can feel fresh and distinctive.
Logo in the center
Centres the logo for a symmetrical, balanced appearance.
Logo with left descriptor
Adds descriptive text to the left of the logo for additional context or branding.
Logo with right descriptor
Places descriptor text to the right of the logo. Useful for short taglines or guidance.
Logo left with border bottom
A logo on the left with a border underneath. Adds a clear visual break from the content below.
Logo left with border top
Includes a top border above the logo section. Useful when separating the header from elements above.
Logo with left descriptor and border bottom
Combines a left-aligned descriptor and bottom border. Helps emphasise the descriptor.
Logo with left descriptor and border top
A variation with a top border. Provides visual separation and emphasis on the descriptor.