Column

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

Install

Install the component from your command line

pnpm

pnpm add jsx-email

bun

bun add jsx-email

npm

npm add jsx-email

yarn

yarn add jsx-email

Usage

ColumnExample.jsx

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

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

HTML Output

Renders as a <td> element within an email table structure.

Props

TypeScript Interface

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

Optional Props

bgColor

bgColor?: string;

Sets the background color using HTML email’s bgcolor property.

bgImage

bgImage?: string;

Sets the background image using HTML email’s background property.

Additional Props

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