blackchalkv0.3.0
Components

Page Layout

SketchPageLayout — a simple column layout with an optional sticky header slot and a scrollable body region.

SketchPageLayout stacks an optional header above a scrollable body region, adding bottom breathing room (paddingBottom: 80) beneath the content.

Default

import { SketchPageLayout } from "blackchalk";<SketchPageLayoutheader={  <div style={{ padding: 24, borderBottom: "1px solid var(--sketch-border)" }}>    <h1 style={{ margin: 0 }}>Dashboard</h1>  </div>}><div style={{ padding: 24 }}>  <p>Page body content sits below the header with bottom breathing room.</p></div></SketchPageLayout>

Props

PropTypeDefault
headerReactNode
childrenReactNode

See it in the Storybook playground, or read the source.

On this page