Content

EText, EHeading, ELink, EImg, EHr, and the Outlook-safe EButton — the text, media, and call-to-action primitives.

These primitives carry the visible content of an email. Each ships with email-safe defaults you can override through style.

Text and media

Component	Important props	Defaults and fixed behavior
`EHeading`	`as?: 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'`; safe heading attributes.	`as="h1"`. An invalid tag fails rendering.
`EText`	Safe paragraph attributes and the default slot.	Renders `<p>` with `font-size: 14px`, `line-height: 24px`, and `16px` top/bottom margins unless overridden. CSS margin shorthand is expanded deterministically.
`ELink`	Required non-empty `href`; safe anchor attributes.	`target="_blank"`, `color: #067df7`, no text-decoration line. Override `target`, `rel`, and styles explicitly. URL schemes are not validated.
`EImg`	Required non-empty `src` and required string `alt`; safe image attributes such as `width`/`height`.	Block display, no border/outline/text-decoration. Use `alt=""` for a decorative image. The URL is serialized but never fetched.
`EHr`	Safe horizontal-rule attributes.	Full width, transparent border, `1px solid #eaeaea` top border. User styles override individual defaults.

vue

<EHeading as="h2" :style="{ margin: '0 0 12px' }">Account ready</EHeading>
<EText :style="{ color: '#334155' }">Your workspace is ready.</EText>
<ELink href="https://example.com/account" rel="noreferrer">Open account</ELink>
<EImg src="https://example.com/logo.png" alt="Example" width="120" height="32" />
<EHr :style="{ borderTopColor: '#cbd5e1' }" />

Client note: images

Many clients block remote images by default, so always supply meaningful alt text (or alt="" for purely decorative images). width and height attributes help reserve layout space before images load.

EButton — Outlook-safe call to action

EButton renders an anchor with conditional MSO spacer fragments so its padding stays usable in Outlook for Windows.

Prop	Contract
`href`	Required non-empty string. The destination is escaped but its scheme is not validated.
`target`	Defaults to `_blank`; override with a native anchor target when required.
`style`	Normal Vue style. Padding is also converted into deterministic Outlook spacer markup.
Other attributes	Safe anchor attributes such as `class`, `id`, `rel`, and `aria-*` are forwarded.

Button padding accepts finite non-negative numbers or px, em, rem, and % values. Shorthand may contain one to four values, and later physical declarations override earlier shorthand exactly as CSS source order does. Other units, negative values, non-finite numbers, and output large enough to inflate the email are rejected rather than emitting corrupted MSO markup.

vue

<EButton
  href="https://example.com/activate"
  rel="noreferrer"
  :style="{
    backgroundColor: '#0f5132',
    borderRadius: '6px',
    color: '#ffffff',
    padding: '12px 20px',
  }"
>
  Activate account
</EButton>

Client note: Outlook buttons

Outlook for Windows ignores CSS padding on inline anchors. EButton emits MSO-conditional spacer markup so the button keeps comparable horizontal and vertical padding there. Verify the button in Outlook during manual QA.