mirror of
https://github.com/resend/react-email.git
synced 2026-09-14 14:18:02 +08:00
Gabriel Miranda
61 lines
1.0 KiB
Plaintext
61 lines
1.0 KiB
Plaintext
---
|
|
title: "Section"
|
|
sidebarTitle: "Section"
|
|
description: "Display a section that can also be formatted using rows and columns."
|
|
"og:image": "https://react.email/static/covers/section.png"
|
|
icon: "rectangles-mixed"
|
|
---
|
|
|
|
import Support from '/snippets/support.mdx'
|
|
|
|
## Install
|
|
|
|
Install component from your command line.
|
|
|
|
<CodeGroup>
|
|
|
|
```sh npm
|
|
npm install react-email -E
|
|
```
|
|
|
|
```sh yarn
|
|
yarn add react-email -E
|
|
```
|
|
|
|
```sh pnpm
|
|
pnpm add react-email -E
|
|
```
|
|
|
|
</CodeGroup>
|
|
|
|
## Getting started
|
|
|
|
Add the component to your email template. Include styles where needed.
|
|
|
|
```jsx
|
|
import { Section, Column, Row, Text } from "react-email";
|
|
|
|
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>
|
|
);
|
|
};
|
|
```
|
|
|
|
<Support/>
|