Hyper Elementsv0.3
Get started

Blocks

Heading

A heading, from level 1 (the page's title) to 6. The Heading component's props, styles and an example, in Hyper Elements.

import { Heading } from "@hyper-elements/react";

Example

Show the code
heading.tsx
import { Column, Email, Heading } from "@hyper-elements/react";

export default function Example() {
  return (
    <Email width={520} style={{ backgroundColor: "#ffffff", fontFamily: "Inter, Helvetica, Arial, sans-serif", color: "#0f172a", gap: 16 }}>
      <Column style={{ padding: 24, gap: 16 }}>
        <Column style={{ gap: 6 }}>
          <Heading level={1} style={{ fontSize: 32, letterSpacing: -0.5 }} mobile={{ fontSize: 26 }}>
            Ship emails like code
          </Heading>
          <Heading level={2} style={{ fontSize: 20, color: "#475569", fontWeight: 500 }}>
            A level-2 heading under it
          </Heading>
      </Column>
      </Column>
    </Email>
  );
}

Reference

A heading, from level 1 (the page’s title) to 6.

Holds: text; PageNumber, Span, Link, LineBreak, MergeTag. Drawn in: email, page.

Props:

  • level: one of 1, 2, 3, 4, 5, 6 (default 1)
  • dir: one of “ltr”, “rtl”, “auto”. Its text’s direction, where it differs from the template’s; it starts on that side unless aligned otherwise.

style:

  • color: color (inherited)
  • fontFamily: fontFamily (inherited)
  • fontSize: a length (a number of px) (inherited)
  • fontWeight: fontWeight (default 700, inherited)
  • fontStyle: one of “normal”, “italic” (inherited)
  • lineHeight: lineHeight (default 1.25, inherited)
  • letterSpacing: a length (a number of px) (inherited)
  • textAlign: one of “left”, “center”, “right”, “justify” (inherited)
  • textTransform: one of “none”, “uppercase”, “lowercase”, “capitalize” (inherited)
  • textDecoration: one of “none”, “underline”, “line-through”
  • width: a length (a number of px, %)
  • maxWidth: a length (a number of px, %)
  • padding: insets
  • backgroundColor: color
  • border: border
  • borderRadius: radius
  • flex: flex. In a Row: its share of the width left after children with a width (default 1); “none” takes its own size.

mobile (on phones): fontSize, lineHeight, letterSpacing, textAlign, width, maxWidth, padding, border.