# Page header

The title area at the top of a page, with an optional description and page-level actions.

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

export default function PageHeaderDemo() {
  return (
    <PageHeader.Root>
      <PageHeader.Row>
        <PageHeader.Title level={2}>Members</PageHeader.Title>
        <PageHeader.Actions>
          <Button hierarchy="secondary">Export</Button>
          <Button>Invite members</Button>
        </PageHeader.Actions>
      </PageHeader.Row>
      <PageHeader.Description>
        Manage who can access this workspace and what they can do.
      </PageHeader.Description>
    </PageHeader.Root>
  );
}
```

## Usage

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

<PageHeader.Root>
  <PageHeader.Row>
    <PageHeader.Title level={1} />
    <PageHeader.Actions />
  </PageHeader.Row>
  <PageHeader.Description />
</PageHeader.Root>;
```

The title always uses heading size 1. Give it `level={1}`; the demo uses `level={2}` because this page already has an H1. Actions wrap below the title when space runs out.

## API

### `PageHeader.Root`

Renders `<header>`. Accepts its HTML attributes and `ref`.

### `PageHeader.Row`

Renders `<div>`. Accepts its HTML attributes and `ref`.

### `PageHeader.Title`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `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`.

### `PageHeader.Actions`

Renders `<div>`. Accepts its HTML attributes and `ref`.

### `PageHeader.Description`

Renders `<p>`. Accepts its HTML attributes and `ref`.