Skip to content

## Section ​

Creates section bordaries that can be formatted with columns and rows

## Install ​

Install the component from your command line

pnpmbunnpmyarn
console

    pnpm add jsx-email

    pnpm add jsx-email

console

    bun add jsx-email

    bun add jsx-email

console

    npm add jsx-email

    npm add jsx-email

console

    yarn add jsx-email

    yarn add jsx-email

## Usage ​

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

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>
        </>
      );
    };

    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>
        </>
      );
    };

## Component Props ​

This component has no custom props, but expresses all of the Common Component Props for `ComponentProps<'table'>`.