# Page

Stacks a page's content with consistent spacing (`semantic.dimension.space.gap.large`, 24px). It renders a `div`, not a landmark.

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

export default function PageDemo() {
  return (
    <Page>
      <Heading level={2} size={1}>
        Workspace overview
      </Heading>
      <Text>Review your team's projects and recent activity.</Text>
      <Card label="Active projects" value="12" description="Across three teams" />
    </Page>
  );
}
```

## Usage

```tsx
import {Container, Layout, Page} from '@earendil-works/elanor-react';

<Layout.Main>
  <Container>
    <Page>{/* Page header, sections, and content */}</Page>
  </Container>
</Layout.Main>;
```

[Layout.Main](/components/layout.md) provides the main landmark and [Container](/components/container.md) the width; Page only spaces its children. Give the page title `level={1}`; the demo uses `level={2}` because this page already has an H1.

## API

### `Page`

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