A block of heading text with support for all heading levels (h1-h6).
Installation
npm install @react-email/heading -E
Usage
Add the component to your email template. Include styles where needed.
import { Heading } from "@react-email/heading";
const Email = () => {
return <Heading as="h1">Lorem ipsum</Heading>;
};
Props
as
'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
default:"h1"
The heading level to render
Inline styles for the heading
Shorthand for setting all margins
Horizontal margin (left and right)
Vertical margin (top and bottom)
Examples
Different Heading Levels
import { Heading } from "@react-email/heading";
const Email = () => {
return (
<>
<Heading as="h1">Main Title</Heading>
<Heading as="h2">Subtitle</Heading>
<Heading as="h3">Section Heading</Heading>
</>
);
};
With Custom Margins
import { Heading } from "@react-email/heading";
const Email = () => {
return (
<Heading as="h1" mt="24px" mb="16px" style={{ color: "#333" }}>
Welcome to Our Newsletter
</Heading>
);
};
TypeScript
export type HeadingAs = As<'h1', 'h2', 'h3', 'h4', 'h5', 'h6'>;
export type HeadingProps = HeadingAs & Margin;
Email Client Support
This component was tested using the most popular email clients.
| Gmail | Apple Mail | Outlook | Yahoo! Mail | HEY | Superhuman |
|---|
| ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |