Skip to content

## Column ​

A JSX email component which displays columns that separate content bounaries vertically

## 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 } from 'jsx-email';

    const Email = () => {
      return (
        <Row>
          <Column>A</Column>
          <Column>B</Column>
          <Column>C</Column>
        </Row>
      );
    };

    import { Column, Row } from 'jsx-email';

    const Email = () => {
      return (
        <Row>
          <Column>A</Column>
          <Column>B</Column>
          <Column>C</Column>
        </Row>
      );
    };

## Component Props ​

tsx

    export interface ColumnProps extends BaseProps<'td'> {
      bgColor?: string;
      bgImage?: string;
    }

    export interface ColumnProps extends BaseProps<'td'> {
      bgColor?: string;
      bgImage?: string;
    }

tsx

    bgColor: string;

    bgColor: string;

Used to set the background color in HTML email by wrapping the `bgcolor` property of `<td>` elements

tsx

    bgImage: string;

    bgImage: string;

Used to set background images in HTML email by wrapping the `background` property of `<td>` elements

TIP

This component expresses all of the Common Component Props for `ComponentProps<'td'>`.