Column

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

pnpm

aube

bun

npm

yarn

pnpm add jsx-email

Usage

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

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

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

Component Props

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

bgColor: string;

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

bgImage: string;

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

Tips

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