Display a section that can be formatted using columns and rows.
Installation
npm install @react-email/section -E
Usage
Add the component to your email template. Include styles where needed.
import { Section } from '@react-email/section';
import { Column } from '@react-email/column';
import { Row } from '@react-email/row';
import { Text } from '@react-email/text';
const Email = () => {
return (
{/* A simple section */}
<Section>
<Text>Hello World</Text>
</Section>
{/* Formatted with rows and columns */}
<Section>
<Row>
<Column>Column 1, Row 1</Column>
<Column>Column 2, Row 1</Column>
</Row>
<Row>
<Column>Column 1, Row 2</Column>
<Column>Column 2, Row 2</Column>
</Row>
</Section>
);
};
Props
The Section component accepts all standard HTML table attributes.
The content to place inside the section. Can contain text, components, or Row/Column components for layout
Inline styles for the section
Implementation Details
The Section component renders as a table with:
- Centered alignment
- Full width (
100%)
- No border, cellPadding, or cellSpacing
role="presentation" for accessibility
TypeScript
export type SectionProps = Readonly<React.ComponentPropsWithoutRef<'table'>>;
Email Client Support
This component was tested using the most popular email clients.
| Gmail | Apple Mail | Outlook | Yahoo! Mail | HEY | Superhuman |
|---|
| ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |