Page Layout
Page-level layout patterns for composing headers, bodies, and tabbed content. These organisms sit inside AppShellMain and provide consistent page structure.
PageHeader with Breadcrumb and Actions
Settings
Manage your account preferences.
PageBody content goes here.
Page with Tabs
Project
Overview tab content goes here.
Compact header
size="sm" is the bar a working page wants above it: one row, no background of its own, a title beside its status rather than over it. Children are laid out inline, so a back button, the title and a badge are siblings. PageHeaderActions moves itself to the far end. It stands as tall as AppShellLogo, so inside an app shell the two bottom borders meet at the sidebar's edge instead of stepping across it. A bar that wraps grows past that height.
PageHeader Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "default" | "sm" | "default" | Layout of the header. "default" is a full band with a card background and stacked children. "sm" is a compact single-row bar with no background, for a page inside an app shell. The size reaches PageHeaderTitle and PageHeaderActions too. |
className | string | — | Additional CSS classes to apply to the page header. |
PageHeaderBack Props
The back arrow a deeper page wears, at the start of its bar. It is the outline icon button with an ArrowLeft that every such page was writing out, and it is 36px rather than 40 so it sits level with the sm controls at the other end of the row.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Where it goes back to, spoken. It is the accessible name, and it is required: the button draws an arrow and nothing else. |
render | ReactElement | — | Render a link instead of a button, e.g. render={<Link href="/jobs" />}. Prefer this over an onClick into history, so the destination is a URL a person can open in a new tab. |
...Button props | ButtonProps | variant="outline" size="icon-sm" | Forwarded to the Button underneath, including variant and size. |
PageBody Props
| Prop | Type | Default | Description |
|---|---|---|---|
fullWidth | boolean | false | Skip the max-width Center wrapper when true. |
padding | "default" | "none" | "default" | Use "none" to remove default padding. |