Panel and panel grid

Panels are the page grid. A words panel is a flat reading plate; an art panel fills with art and places balloons, captions and a corner box in a 3 × 3 grid of named areas, in reading order; a split panel has both. Slanted rows slant their shared gutters in parallel, and a broken frame lets art cross the frame while the words stay inside.

Example#

Volume

Paper

Colourway

Four kinds of work, mostly websites.

Toronto. Taking projects, Q4 2026.

Built to be tested.

Live render of examples/panel/basic.tsx

Usage#

Panels are how a comic page holds sections: a PanelGrid of Panels, read left to right, top to bottom, in DOM order. A words panel is a flat plate for reading; an art panel fills with art and carries its words on balloons and captions placed in a 3 × 3 grid of areas; a split panel has both.

Frames. straight (default), slanted (shared gutters slant in parallel; the words region pads out so text stays square) and broken (art in breakOut crosses the frame into the gutter, never into another panel's words).
Grid. columns (1 to 4) or a CSS template; span, rows and splash (a full-width tall panel) shape a panel.
Arrival. Panels wipe in once as they reach the viewport; the words are revealed, never moved.
Phones. One column, slants flattened, split panels stack art on top.

Layer and volume#

Gutters follow the register: paper (studio), pulp with fibre, speck and a vignette (old, Bone at Press), night with grain (neon). Quiet renders slanted and broken frames straight and drops the arrival. Studio: one slanted row and one broken frame per view; Press: slanted free, two broken; Rave free. Phones: one column, no slant, break-out ≤ 24 px.

Anatomy#

Four kinds of work, mostly websites.

Toronto. Taking projects, Q4 2026.

Built to be tested.

GridPaper gutters, 1.5 rem..mk-panel-grid
Words panelA flat plate for reading..mk-panel-words
Art panelThe art fills it..mk-panel-art
CaptionPlaced in an area of the art panel..mk-caption
BalloonA plate over the art, never text on art..mk-balloon

Volume#

Quiet
Four kinds of work, mostly websites.
Toronto. Taking projects, Q4 2026.
Built to be tested.
Straight frames only, no arrival.
Studio
Four kinds of work, mostly websites.
Toronto. Taking projects, Q4 2026.
Built to be tested.
One slanted row and one broken frame per view.
Press
Four kinds of work, mostly websites.
Toronto. Taking projects, Q4 2026.
Built to be tested.
Slants free, up to two broken frames.
Rave
Four kinds of work, mostly websites.
Toronto. Taking projects, Q4 2026.
Built to be tested.
Free.

Content#

A panel holds at most three balloons and a caption, and 60 words in all (C4).
Long reading, prices, forms and legal text go in a words panel in the text face, never in balloons (C8).

Do and don't#

Four kinds of work, mostly websites.

Toronto. Taking projects, Q4 2026.

Built to be tested.

Words on plates, art in its panel.

Don't

A pricing table set in balloon lettering inside an art panel.

Long reading in lettering.

Comic lettering is for short lines. Prices and long reading belong in a words panel in the text face, where they are easy to read and to copy (D-D7).

Accessibility#

Reading order is DOM order: panels left to right, top to bottom; placement never reorders.
Words stay square and inside the frame; only art breaks out.
Panels wipe in once; words are revealed, never moved. Reduced motion: present at once.
label names a panel and makes it a region.

Props#

Prop	Type	Default	Description
`layout`	`PanelLayout`	none
`art`	`ReactNode`	none	The art (art and split layouts): `aria-hidden` art that fills its region.
`artSide`	`"left" \| "right" \| "top"`	`top`	Split only: where the art region sits (default top).
`overlay`	`ReactNode`	none	Art layout: Balloons, Captions and a CornerBox placed by their `place` prop.
`breakOut`	`ReactNode`	none	Broken frame: art that crosses the frame stroke (never words).
`span`	`number`	none	Grid columns to span.
`rows`	`number`	none	Grid rows to span.
`splash`	`boolean`	none	Full width, `min-block-size: clamp(28rem, 70vh, 48rem)`.
`minBlock`	`string`	`clamp(16rem, 40vh, 28rem)`	Art layout minimum block size (default `clamp(16rem, 40vh, 28rem)`).
`label`	`string`	none	Names the panel (`aria-label`) and makes it a region.
`slant`	`PanelSlant`	none	Set by `PanelGrid` on slanted rows; a panel may also set it itself.
`children`	`ReactNode`	none	Words content (words and split layouts); in the art layout, the same as `overlay`.

Plus 279 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from PanelProps in packages/overprint-react/src/comic/panel.tsx.

Tokens#

System tokens (11)

Its own properties (21)

--mk-cx-grain
--mk-cx-gutter-bg
--mk-cx-gutter-tex
--mk-cx-line
--mk-cx-line-ink
--mk-cx-tex-neon
--mk-cx-tex-old
--mk-cx-vignette
--mk-gutter
--mk-i
--mk-panel-break
--mk-panel-cols
--mk-panel-fill
--mk-panel-inner
--mk-panel-min
--mk-panel-outer
--mk-panel-overlay-pad
--mk-panel-pad
--mk-panel-rows
--mk-panel-span
--mk-panel-template

Scanned from its CSS at build and checked against its registry entry; 4 read but not declared there.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

MinorreactThe print and comic kits, P0 (21 P2-T11 to P2-T15): the art core (seeded halftone, bursts, balloons, lines, krackle, printer's marks, SFX layers, the texture tiles and gen-print-tiles), the print kit (Halftone, Overprint, PrinterMarks, Sticker, Stamp, Seal, useStampLand, Tape, Grain, Misregistration and the .mk-ov second ink, GiantGlyph, ShapeGlyph), the data Cover (grid and score, coverAlt, CoverLegend), the comic registers and kit (Panel, PanelGrid, Balloon, Caption, CornerBox, EditorsNote, ContinuedIn, SFX, SfxBurst, SpeedLines, FocusLines, ImpactStar, KeyPop).