Skip to content
JSX email

Section

Creates section boundaries that can be formatted with columns and rows

Install

Install the component from your command line

Terminal window
pnpm add jsx-email

Usage

SectionExample.jsx
import { Column, Row, Section, Text } from 'jsx-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>
    </>
  );
};

Props

Additional Props

This component expresses all of the Common Component Props for ComponentProps<'table'> except for:

  • cellPadding
  • cellSpacing