Skip to content
JSX email

Heading

A stylable heading (h1, h2, etc) element

Install

Install the component from your command line

Terminal window
pnpm add jsx-email

Usage

HeadingExample.jsx
import { Heading } from 'jsx-email';


const Email = () => {
  return (
    <>
      <Heading as="h1" mt={20} mb={10}>
        Main Title
      </Heading>
      <Heading as="h2" my={15}>
        Subtitle
      </Heading>
    </>
  );
};

Props

TypeScript Interface

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

Optional Props

as

as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

HTML heading level to render.

Margin Props

m?: number | string;    // margin
mx?: number | string;   // margin-left + margin-right
my?: number | string;   // margin-top + margin-bottom
mt?: number | string;   // margin-top
mr?: number | string;   // margin-right
mb?: number | string;   // margin-bottom
ml?: number | string;   // margin-left

Margin shorthand properties. Accept pixel values (number) or CSS units (string).

Additional Props

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