Page composition
Headers, toolbars, detail sections, and back links.
Example
A representative composition rendered with the published package API.
Provider connection
Configure routing and credentials.
Options
The decisions most consumers need to make when adopting this family.
compositionCompose only the regions the page needs. Empty PageToolbar slots collapse, and a toolbar with no content renders nothing.
insetPageFrame, PageHeader, PageToolbar, and DetailBackLink share one left edge at every breakpoint. Inside PageFrame the header adds no inset of its own; a surface can set --ds-frame-content-inset for headers it contains.
PageHeader textureA faint brand wash starts from the workspace corner where the top bar and sidebar meet, painted by MainRegion (or PageFrame outside an app shell), so it never draws a box around an inset header. Set texture={false} to turn it off.
| Option | Values or anatomy | Guidance |
|---|---|---|
composition | PageHeader · PageToolbar · DetailSections · ResourceSummary | Compose only the regions the page needs. Empty PageToolbar slots collapse, and a toolbar with no content renders nothing. |
inset | --ds-frame-padding-x · --ds-frame-content-inset | PageFrame, PageHeader, PageToolbar, and DetailBackLink share one left edge at every breakpoint. Inside PageFrame the header adds no inset of its own; a surface can set --ds-frame-content-inset for headers it contains. |
PageHeader texture | true (default) · false | A faint brand wash starts from the workspace corner where the top bar and sidebar meet, painted by MainRegion (or PageFrame outside an app shell), so it never draws a box around an inset header. Set texture={false} to turn it off. |
Usage
Copy the package import and adapt the composition to product-owned content and state.
import { DetailBackLink, DetailSection, DetailSections, KeyValueItem, KeyValueList } from "@conscia-labs/design-system";