Layout

Updated May 12, 2026

Overview

Layout is vitally important in creating an intelligent and impactful email.

The hierarchy of information should reflect the importance of the information and the prioritisation of each user action.

A strong email layout also ensures the reader can scan the email, find the information most relevant to them and engage with that information without having to read the email from top to bottom.

Design

Default layout 600	Responsive layout < 600
Vertical spacing24px for same section i.e. 2A,2B32px for different section i.e. 2A,3A	Same vertical spacing applies in this layout as the default.Note how the sections act in a responsive manner.

basic elements - default layout 600

basic elements - responsive layout < 600

Best practice

The hero header should be on a dark background, incorporate a visually-engaging headline, image or illustration and often house the primary CTA.

The core content should be on a white background for easy readability.

If your email has only one block, then the content’s headline should be within the hero block on the dark background with the rest of the content on the light background below.

Date	Change
September 2024	Copied information from Web Design System / Layout.