Page Container

Content container for page-level layout. Centers content with max-width and responsive padding. Used once per page inside an app shell's main content area.

Sizes

narrow (640px) — forms, settings

default (960px) — articles, detail pages

wide (1200px) — list pages, dashboards [default]

full (1440px) — canvas, wide layouts

Usage

In your layout or page

<PageContainer>
  <h1>Page Title</h1>
  <p>Content here</p>
</PageContainer>

<!-- Narrow for settings -->
<PageContainer size="narrow">
  <SettingsForm />
</PageContainer>

<!-- Wide for list pages -->
<PageContainer size="wide">
  <DataTable />
</PageContainer>

TOKEN REFERENCE

use component tokens from :

--content-width-narrow: 640px (forms, settings)--content-width: 960px (articles, detail pages)--content-width-wide: 1200px (list pages, dashboards)--content-width-full: 1440px (wide layouts)--content-padding-x: responsive (md: 16px, lg: 24px, xl: 32px)--content-padding-y: responsive (md: 24px, lg: 32px, xl: 48px)