Layout

The layout pieces of an email: a centered Container, full-width Section bands, Row and Column for side by side content, and Spacer for vertical space.

Flush on mobile

Wrap the email in a Container to center it, with a Card for the white box and a Spacer above and below for space.

With gutters on mobile

Add email-sm:px-base to the Container to keep space at the left and right edges on narrow screens.

Width from a class

Set a max-w-* class such as max-w-xl on the Container to change its maximum width, as in Tailwind.

Section

Stack Section bands inside a Container, each with its own background and padding, for a header, a body and a footer.

Background image

Pass backgroundImage to a Section to put a photo behind its content, with background as the color shown until the image loads.

Columns

Put Column elements in a Row with a gap, and give each a width that adds up to the container, so they sit side by side and stack on narrow screens.

Without stacking

Set stack={false} on a Row to keep each column at its own width on narrow screens instead of filling the row, like three small figures.

Spacer

Put a Spacer between two blocks to add vertical space of one size from the theme, which Outlook keeps too.