Components
Card Grid
SketchCardGrid — a responsive rough-styled grid for laying out SketchCard items.
SketchCardGrid arranges SketchCard children in a uniform column grid using
SketchGrid under the hood. It's fluid — it fills its container, so wrap it to
control width.
Default
import { SketchCardGrid } from "blackchalk";import { SketchCard } from "blackchalk";<SketchCardGrid><SketchCard style={{ padding: 24 }}> <div style={{ fontWeight: 700, marginBottom: 8 }}>Metric 1</div> <div style={{ fontSize: 28 }}>137</div></SketchCard><SketchCard style={{ padding: 24 }}> <div style={{ fontWeight: 700, marginBottom: 8 }}>Metric 2</div> <div style={{ fontSize: 28 }}>274</div></SketchCard><SketchCard style={{ padding: 24 }}> <div style={{ fontWeight: 700, marginBottom: 8 }}>Metric 3</div> <div style={{ fontSize: 28 }}>411</div></SketchCard></SketchCardGrid>Props
| Prop | Type | Default |
|---|---|---|
columns | number | 3 |
gap | number | 24 |
children | ReactNode | — |
See it in the Storybook playground, or read the source.