Display a column that separates content areas vertically in your email.
Installation
npm install @react-email/column -E
Usage
Add the component to your email template. Include styles where needed.
import { Row } from '@react-email/row';
import { Column } from '@react-email/column';
const Email = () => {
return (
<Row>
<Column>A</Column>
<Column>B</Column>
<Column>C</Column>
</Row>
);
};
Props
The Column component accepts all standard HTML table cell (<td>) attributes.
The content to place inside the column
Inline styles for the column. You can control width, alignment, padding, and other styles
Example with Custom Widths
import { Row } from '@react-email/row';
import { Column } from '@react-email/column';
const Email = () => {
return (
<Row>
<Column style={{ width: '33%' }}>Left</Column>
<Column style={{ width: '34%' }}>Center</Column>
<Column style={{ width: '33%' }}>Right</Column>
</Row>
);
};
TypeScript
export type ColumnProps = Readonly<React.ComponentPropsWithoutRef<'td'>>;
Email Client Support
This component was tested using the most popular email clients.
| Gmail | Apple Mail | Outlook | Yahoo! Mail | HEY | Superhuman |
|---|
| ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |