# Page

> Vertical flow of page sections.

Source: https://ui.jcsoftdev.com/docs/components/page

Vertical flow of page sections. It is the `page` container, so `Cols` and `SettingsLayout`
inside it react to the page width instead of the viewport. With `aside` the page is a content
column plus a rail; the shell around the page still owns the outer gutter and scrolling.

## Import

```ts
import { Page } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/page`.

## Usage

```tsx
<Page>
  <>
          <PageHeader>
            <PageHeaderTitle>Overview</PageHeaderTitle>
          </PageHeader>
          <Cols>
            <Panel title="Main" />
            <Panel title="Side" />
          </Cols>
        </>
</Page>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `aside` | `ReactNode` |  | A fixed column beside the page content, usually an `Aside`. The column draws a divider and the page background, never narrows the width the `page` container measures (so `Cols` inside the content react the same with or without it), and falls under the content… |
| `asideWidth` | `string \| number` |  | Width of the aside column: a number is pixels, a string any CSS length. Default `20rem` (320px at 16px). |
| `asideSticky` | `boolean` | `false` | Keeps the aside column in view and scrolls it on its own beside the content (above 1000px). |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/containers-page--default)
- [With Aside](/storybook/?path=/story/containers-page--with-aside)
- [Aside Below On Narrow Page](/storybook/?path=/story/containers-page--aside-below-on-narrow-page)
- [Wide Aside](/storybook/?path=/story/containers-page--wide-aside)

## Source

`packages/ui/src/containers/page/page.tsx`