Page

Page is the shell container every product page shares: a PageHeader handing off to a PageContent body across a known vertical gap, inside one shared horizontal column. It owns the page's inset and header-to-body rhythm so individual pages stop re-deriving them. Composition uses sibling named exports — Page, PageHeader, PageContent — not a compound Page.Header namespace (a compound static does not survive Next/Turbopack RSC bundling).

Use it for

• The outer shell of any product page — header + body in a shared column
• Standardizing horizontal inset and header→body spacing across a product
• Full-bleed board / table pages that need the body to break out and own its scroll

Import

import { Page, PageHeader, PageContent } from '@brikdesigns/bds';

Variants

Default

padding sets the shared horizontal inset (single source of truth for the column); gap sets the vertical space between header and body.

// The parent must be a flex column — the app shell provides this.
<Page padding="md" gap="xl">
  <PageHeader title="Services" subtitle="…" actions={<Button>Add</Button>} />
  <PageContent>
    <FilterBar total={49} filtered={49} label="services" />
    <Table>…</Table>
  </PageContent>
</Page>

Full-bleed body with internal scroll

PageContent inherits the page inset by default. Set padding="none" to break out edge-to-edge for a board or table, and scroll so the body scrolls internally while the page frame stays put.

<Page padding="md">
  <PageHeader title="Board" />
  <PageContent padding="none" scroll>
    <Board>…</Board>
  </PageContent>
</Page>

When not to use

• Don't nest Page inside Page. One shell per page — additional structure comes from the layout primitives inside PageContent.

Accessibility

• Page is a structural <div> shell — semantics come from what you place inside it (PageHeader's heading, the body's landmarks).
• Keep the app shell a flex column so the fill-height + internal-scroll contract holds; otherwise the body won't own its scroll region.

API

Page

Plus all standard <div> HTML attributes.

PageContent

Plus all standard <div> HTML attributes.

Related

• PageHeader — the header region that pairs with PageContent inside Page
• Stack · Grid · Cluster · Frame — layout primitives for arranging body content
• Storybook playground