Back to React Email

Readme

packages/section/readme.md

0.0.153.1 KB
Original Source

<div align="center"><strong>@react-email/section</strong></div> <div align="center">Display a section that can be formatted using columns.</div> <div align="center"> <a href="https://react.email">Website</a> <span> · </span> <a href="https://github.com/resend/react-email">GitHub</a> </div>

Install

Install component from your command line.

With yarn

sh
yarn add @react-email/section -E

With npm

sh
npm install @react-email/section -E

Getting started

Add the component to your email template. Include styles where needed.

jsx
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 (
    <Section>
      <Text>Hello World</Text>
    </Section>
     <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

This component was tested using the most popular email clients.

Gmail ✔Apple Mail ✔Outlook ✔Yahoo! Mail ✔HEY ✔Superhuman ✔

License

MIT License