Skip to content

## Heading ​

A stylable heading (h1, h2, etc) element

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

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

    import { Heading } from 'jsx-email';

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

## Component Props ​

ts

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

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

ts

    as?: string;

    as?: string;

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

ts

    m?: number | string;

    m?: number | string;

A shortcut for `margin` CSS property.

ts

    mx?: number | string;

    mx?: number | string;

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

ts

    my?: number | string;

    my?: number | string;

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

ts

    mt?: number | string;

    mt?: number | string;

A shortcut for `margin-top` CSS property.

ts

    mr?: number | string;

    mr?: number | string;

A shortcut for `margin-right` CSS property.

ts

    mb?: number | string;

    mb?: number | string;

A shortcut for `margin-bottom` CSS property.

ts

    ml?: number | string;

    ml?: number | string;

A shortcut for `margin-left` CSS property.

TIP

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