Heading

A stylable heading (h1, h2, etc) element

pnpm

aube

bun

npm

yarn

pnpm add jsx-email

Usage

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

import { Heading } from 'jsx-email';

const Email = () => {
  return <Heading as="h2">Lorem ipsum</Heading>;
};

Component Props

export interface Margin {
  m?: number | string;
  mb?: number | string;
  ml?: number | string;
  mr?: number | string;
  mt?: number | string;
  mx?: number | string;
  my?: number | string;
}

export type PresentAs = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

export type HeadingProps = Margin & { as?: PresentAs };

as?: string;

Render component as h1, h2, h3, h4, h5 or h6.

m?: number | string;

A shortcut for margin CSS property.

mx?: number | string;

A shortcut for margin-left and margin-right CSS properties.

my?: number | string;

A shortcut for margin-top and margin-bottom CSS properties.

mt?: number | string;

A shortcut for margin-top CSS property.

mr?: number | string;

A shortcut for margin-right CSS property.

mb?: number | string;

A shortcut for margin-bottom CSS property.

ml?: number | string;

A shortcut for margin-left CSS property.

Tips

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