Hr

Horizontal rule for email layouts.

A horizontal rule component with email-safe default styling. Renders a full-width divider with a subtle top border.

Import

React

import { Hr } from "@unmail/react";

Vue

<script setup>
import { Hr } from "@unmail/vue";
</script>

Usage

React

import { Hr } from "@unmail/react";

export function Email() {
  return (
    <>
      <p>Section one content</p>
      <Hr style={{ borderTop: "2px solid #333", margin: "24px 0" }} />
      <p>Section two content</p>
    </>
  );
}

Vue

<script setup>
import { Hr } from "@unmail/vue";
</script>

<template>
  <p>Section one content</p>
  <Hr :style="{ borderTop: '2px solid #333', margin: '24px 0' }" />
  <p>Section two content</p>
</template>

Props

All standard HTML <hr> element attributes are supported.

Default styles

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

Notes

• border: none is applied first to reset any default browser/email client borders, then border-top adds the visible divider line.
• Override the borderTop style to customize the divider appearance.