Components
Page Container
SketchPageContainer — a centred, max-width layout wrapper for page-level content.
SketchPageContainer centres its children horizontally within a configurable max-width
and applies consistent page padding — the standard shell for any full-page sketch layout.
Default
import { SketchPageContainer, SketchCard } from "blackchalk";<SketchPageContainer><h1 style={{ marginTop: 0 }}>Settings</h1><SketchCard style={{ padding: 24 }}> Centred, max-width content with consistent page padding.</SketchCard></SketchPageContainer>Narrow
Pass maxWidth to constrain reading-width content such as onboarding flows or forms.
import { SketchPageContainer, SketchCard } from "blackchalk";<SketchPageContainer maxWidth={560}><h1 style={{ marginTop: 0 }}>Onboarding</h1><SketchCard style={{ padding: 24 }}>A narrower reading width.</SketchCard></SketchPageContainer>Props
| Prop | Type | Default |
|---|---|---|
maxWidth | number | 960 |
padding | number | 32 |
children | ReactNode | — |
See it in the Storybook playground, or read the source.