Components

Horizontal Rule

Create visual separators and dividers in your email content.

Create visual separators and dividers in your email content with the horizontal rule component. Perfect for separating sections and improving content organization.

Installation

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

Getting Started

Add horizontal dividers to separate content:

emails/WelcomeEmail.vue

<template>
  <EHtml>
    <EBody>
      <EContainer>
        <EText>First section content</EText>
        <EHr />
        <EText>Second section content</EText>
      </EContainer>
    </EBody>
  </EHtml>
</template>

Default Styles

The HR component comes with email-optimized default styles:

hr {
  width: 100%;
  border: none;
  border-top: 1px solid #eaeaea;
}

Best Practices

Consistent spacing: Use consistent margin values for dividers throughout your email.

Border support: Stick to solid borders for maximum email client compatibility.

Color coordination: Match divider colors to your brand palette for cohesive design.

Email Client Support

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

Client-Specific Notes

Outlook: Stick to solid borders for best compatibility
Gmail: Excellent support for all border styles
Mobile clients: Dividers help improve content scannability on small screens

ESection - For content sections
EContainer - For divider spacing
EText - For content around dividers

Edit this pageorReport an issue

Heading

Create semantic headings with customizable margins and styling.

Html

The root HTML element that wraps your email content.