Components

Section

Create content sections with table-based layout for email compatibility.

Create content sections using table-based layout optimized for email client compatibility. Perfect for organizing content into distinct areas with consistent spacing.

Installation

The ESection component is automatically available when you install nuxt-email-renderer. No additional imports needed.

Getting Started

Use sections to organize your email content:

emails/WelcomeEmail.vue

<template>
  <EHtml>
    <EBody>
      <EContainer>
        <ESection style="padding: 20px;">
          <EHeading>Welcome Section</EHeading>
          <EText>This content is in a section.</EText>
        </ESection>
      </EContainer>
    </EBody>
  </EHtml>
</template>

Technical Details

The section component renders as a table for maximum email client compatibility:

<table
  align="center"
  width="100%"
  border="0"
  cellpadding="0"
  cellspacing="0"
  role="presentation"
>
  <tbody>
    <tr>
      <td>
        <!-- Your content here -->
      </td>
    </tr>
  </tbody>
</table>

Best Practices

Consistent spacing: Use consistent padding across sections for visual harmony.

Background images: Test background images carefully as support varies across email clients.

Mobile optimization: Always consider how sections will look on mobile devices.

Section Hierarchy

<template>
  <EContainer>
    <!-- Primary section -->
    <ESection style="padding: 30px;">
      <EHeading as="h1">Main Section</EHeading>
    </ESection>

    <!-- Secondary sections -->
    <ESection style="padding: 20px;">
      <EHeading as="h2">Sub Section</EHeading>
    </ESection>

    <!-- Minor sections -->
    <ESection style="padding: 15px;">
      <EHeading as="h3">Minor Section</EHeading>
    </ESection>
  </EContainer>
</template>

Email Client Support

✅ Gmail (Desktop & Mobile)
✅ Apple Mail
✅ Outlook 2016+
✅ Yahoo Mail
✅ Thunderbird
✅ Samsung Email
✅ HEY

EContainer - For section grouping
ERow and EColumn - For section layouts
EHeading and EText - For section content

Edit this pageorReport an issue

Row

Create horizontal layouts using table rows for email compatibility.

Style

A component for adding custom CSS styles to email templates.