Layout

EContainer, ESection, ERow, and EColumn — presentation-table primitives for stable email layouts.

These components use presentation tables for email-client compatibility.

EContainer

EContainer renders a centered presentation table for bounded content. It defaults to align="center", width="100%", and a maximum width of 37.5em. Its fixed attributes are border="0", cellpadding="0", cellspacing="0", and role="presentation".

Prop	Type	Default	Required
—	No component-specific props; accepts safe table attributes except the fixed attributes above.	—	—

vue

<EContainer :style="{ maxWidth: '600px' }">Content</EContainer>

ESection

ESection renders a full-width presentation table with one inner cell.

Prop	Type	Default	Required
—	No component-specific props; accepts safe table attributes except `border`, `cellpadding`, `cellspacing`, and `role`.	—	—

vue

<ESection :style="{ padding: '16px' }">Content</ESection>

ERow

ERow renders a full-width presentation table whose row receives its default slot. Put EColumn components directly in the slot.

Prop	Type	Default	Required
—	No component-specific props; accepts safe table attributes except `border`, `cellpadding`, `cellspacing`, and `role`.	—	—

vue

<ERow><EColumn>Content</EColumn></ERow>

EColumn

EColumn renders a <td> cell. It has no default width and adds no synthetic React marker.

Prop	Type	Default	Required
—	No component-specific props; accepts safe cell attributes such as `width`, `colspan`, alignment, and `style`.	—	—

vue

<EColumn width="50%">Left</EColumn>

Padding placement

EContainer, ESection, and ERow move physical padding known at render time to a <td>. This includes author styles and non-variant Tailwind utilities. Responsive and pseudo-class utilities remain CSS rules because they have no single inline value. Put responsive padding on an inner EColumn and verify the target clients.

ERow adds its padding wrapper only when physical padding exists. Logical padding properties remain on the table.

Fixed presentation attributes

EContainer, ESection, and ERow reject overrides for border, cellpadding, cellspacing, and role, including alternate casing. Use style when you need a visual border. This deliberate divergence prevents silently broken layout semantics.

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

Columns remain table cells in Outlook for Windows. Give them explicit widths and verify narrow layouts in your client QA.