# Heading

A section heading. `level` sets its place in the document outline; `size` sets how large it looks.

```tsx
// demo.tsx
import {Heading} from '@earendil-works/elanor-react';

export default function HeadingDemo() {
  return (
    <Heading level={2} size={1}>
      Projects
    </Heading>
  );
}
```

## Usage

```tsx
import {Heading} from '@earendil-works/elanor-react';

<Heading level={1} size={1}>
  Projects
</Heading>;
```

Give each page one `level={1}` heading and don't skip levels. The demos on this page start at `level={2}` because the page already has an H1.

## Size

Sizes go from `1`, the largest, to `6`, the default, one per `semantic.typography.heading.app` style (36, 32, 28, 24, 21, and 18px). Choose the size for the visual hierarchy, independently of the level: a card's `level={3}` heading usually stays at the default. Where the level already reflects the hierarchy, as in headings rendered from Markdown, pass `size={level}`.

```tsx
// sizes.tsx
import {Heading, Stack} from '@earendil-works/elanor-react';

export default function HeadingSizes() {
  return (
    <Stack gap="medium">
      <Heading level={3} size={1}>
        Size 1
      </Heading>
      <Heading level={3} size={2}>
        Size 2
      </Heading>
      <Heading level={3} size={3}>
        Size 3
      </Heading>
      <Heading level={3} size={4}>
        Size 4
      </Heading>
      <Heading level={3} size={5}>
        Size 5
      </Heading>
      <Heading level={3}>Size 6 (default)</Heading>
    </Stack>
  );
}
```

## Marketing

`variant="marketing"` sets headings for promotional pages in the `semantic.typography.heading.marketing` styles: the prose typeface, larger (73px down to 18px), and lighter the larger they are. Use them for landing pages and announcements, not inside the product. Only marketing headings have `size="display"` (96px), for oversized promotional text above the heading hierarchy, such as a hero line. Choose `level` by the outline as usual: a display heading is often the page's `level={1}`.

```tsx
// marketing.tsx
import {Heading, Stack} from '@earendil-works/elanor-react';

export default function HeadingMarketing() {
  return (
    <Stack gap="medium">
      <Heading level={3} variant="marketing" size="display">
        Display
      </Heading>
      <Heading level={3} variant="marketing" size={1}>
        Size 1
      </Heading>
      <Heading level={3} variant="marketing" size={2}>
        Size 2
      </Heading>
      <Heading level={3} variant="marketing" size={3}>
        Size 3
      </Heading>
      <Heading level={3} variant="marketing" size={4}>
        Size 4
      </Heading>
      <Heading level={3} variant="marketing" size={5}>
        Size 5
      </Heading>
      <Heading level={3} variant="marketing">
        Size 6 (default)
      </Heading>
    </Stack>
  );
}
```

## API

### `Heading`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `'app'` | `'app'` | Heading style: `app` for interfaces, `marketing` for promotional pages. |
| `size` | `1 \| … \| 6` | `6` | Visual size, from `1` (largest) to `6`, one per `semantic.typography.heading.app` style. |
| `level` (required) | `1 \| … \| 6` | - | Heading level. Follow the page outline; `level` doesn't change the size. |

Renders `<h1>`–`<h6>`. Also accepts its HTML attributes and `ref`.