Layout

EContainer, ESection, ERow, and EColumn — the presentation-table primitives that keep layout stable across email clients.

Email layout must use tables, not modern CSS. These four components emit email-client-safe presentation tables and move physical padding to inner cells where clients handle it reliably.

Component	Output and important props	Defaults and fixed behavior
`EContainer`	Centered presentation table for bounded content; accepts safe table attributes except the fixed semantics.	`width="100%"`, `max-width: 37.5em`; physical padding moves to the inner cell. `border`, `cellpadding`, `cellspacing`, and `role` are fixed.
`ESection`	Full-width presentation table with one inner cell.	Physical padding moves to the inner cell. Presentation-table attributes are fixed.
`ERow`	Full-width presentation table whose row receives slot content.	Place `EColumn` components directly in the slot. Physical padding is carried by an outer presentation-table cell when present. Presentation-table attributes are fixed.
`EColumn`	A `<td>` cell; accepts safe cell attributes such as `width`, `colspan`, alignment, and style.	No synthetic React marker and no default width.

Padding placement

For EContainer, ESection, and ERow, physical padding, paddingTop, paddingRight, paddingBottom, and paddingLeft are placed on a <td> for compatibility with clients that force collapsed table borders. ERow emits its wrapper only when physical padding is present. Logical padding properties remain on the table.

This relocation applies to padding known at render time: author style and non-variant Tailwind utilities such as p-4. Responsive or pseudo-class utilities such as md:p-4 remain CSS rules on the presentation table because they have no single inline value to move. Clients that force table { border-collapse: collapse } may ignore that table padding. Put responsive padding on an inner EColumn (a real <td>) and verify the target clients.

Fixed presentation attributes

EContainer, ESection, and ERow fix border, cellpadding, cellspacing, and role to preserve the email-safe table layout. Unlike React Email — which silently discards overrides for these attributes — Nuxt Email throws a TypeError when any of them is supplied (case-insensitive, so cellPadding and cellSpacing are caught too). Set these through style if you need to adjust them. This is a deliberate divergence: fail loudly rather than emit a silently-broken layout.

vue

<EContainer :style="{ maxWidth: '600px', padding: '24px' }">
  <ESection :style="{ padding: '16px 20px' }">
    <ERow>
      <EColumn width="50%">Left</EColumn>
      <EColumn width="50%">Right</EColumn>
    </ERow>
  </ESection>
</EContainer>

Client note: Outlook columns

Two-column rows built with ERow / EColumn hold together in Outlook for Windows because they are real table cells, not floats or flexbox. Give columns explicit width values and verify narrow-width rendering — see the client compatibility guide.