Content

EText, EHeading, ELink, EImg, EHr, and EButton for visible email content.

These components carry the visible content of an email. Layout-sensitive components provide email-safe defaults. ELink is visually neutral.

EText

EText renders a <p> with font-size: 14px, line-height: 24px, and 16px top and bottom margins. Author styles override these defaults.

Prop	Type	Default	Required
—	No component-specific props; accepts shared safe native attributes.	—	—

vue

<EText :style="{ color: '#334155' }">Your workspace is ready.</EText>

EHeading

EHeading renders a heading element. An unsupported tag fails during rendering.

Prop	Type	Default	Required
`as`	`'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'`	`h1`	No

It also accepts shared safe native attributes.

vue

<EHeading as="h2">Account ready</EHeading>

ELink

ELink renders a visually neutral anchor. It adds no color or text decoration.

Prop	Type	Default	Required
`href`	`string`	—	Yes
`target`	Safe native anchor target	`_blank`	No

href must be non-empty. The value is escaped, but its URL scheme is not validated. Set visual styles explicitly and validate application-controlled URLs.

vue

<ELink href="https://example.com/account" style="color:#2563eb">Open account</ELink>

EImg

EImg renders an image with block display and no border, outline, or text decoration.

Prop	Type	Default	Required
`src`	`string`	—	Yes
`alt`	`string`	—	Yes

src must be non-empty. Use alt="" for a decorative image. The URL is serialized but never fetched. Safe image attributes such as width and height are accepted.

vue

<EImg src="https://example.com/logo.png" alt="Example" width="120" height="32" />

EHr

EHr renders a full-width horizontal rule with a transparent border and a 1px solid #eaeaea top border. Author styles override individual defaults.

Prop	Type	Default	Required
—	No component-specific props; accepts shared safe native attributes.	—	—

vue

<EHr :style="{ borderTopColor: '#cbd5e1' }" />

EButton

EButton renders an anchor with conditional Outlook spacer markup. The spacer keeps its padding usable in Outlook for Windows.

Prop	Type	Default	Required
`href`	`string`	—	Yes
`target`	Safe native anchor target	`_blank`	No
`style`	Vue style value	Email-safe anchor defaults	No

The default style uses line-height: 100%, no text decoration, inline-block display, and max-width: 100%. It also sets the Outlook-specific mso-padding-alt property to 0px. Author styles override these values.

Padding accepts finite non-negative numbers or px, em, rem, and % values. Shorthand accepts one to four values. Invalid units, negative or non-finite values, and output large enough to inflate the message fail during rendering.

vue

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

Client notes

Remote images are often blocked, so always provide useful alternative text. Outlook for Windows ignores CSS padding on inline anchors; EButton supplies conditional spacer markup for that client. Verify both behaviors during manual QA.