Skip to content
Site volume
Colourway

Comic kit

Corner box

The comic cover's issue box for availability and status: one per page, top left.

  • Beta
  • Reading layer
  • Server component
  • Since 0.1.0
  • Press check
Import from@maxgrits/overprint-react/comic
On this page

The issue box from a comic's cover, used for availability and status: a big mark (Q4, K, //), a small line and a status line, in a flat box with a hard shadow.

Example#

Look of this example
Q42026Taking projects
Live render of examples/corner-box/basic.tsx

Usage#

Use the corner box for the comic cover's issue box: availability and status at the top left of a comic page, once per page. A big code ("Q4"), a small line ("2026") and a status line, in a heavy frame with a hard offset.

  • Props. big (three characters at most), small, status and an optional dot in a line ink, which always sits beside the words.

Layer and volume#

A plate at 0°, identical at every volume; the register sets the shadow ink.

Anatomy#

Q42026Taking projects
The parts of examples/corner-box/basic.tsx, numbered:
  1. BigAnybody 900, three characters at most..mk-corner-box-big
  2. SmallThe year or the issue..mk-corner-box-small
  3. StatusThe text line, with an optional dot..mk-corner-box-status

Volume#

  • Quiet

    Q42026Taking projects

    Identical.

  • Studio

    Q42026Taking projects

    Identical.

  • Press

    Q42026Taking projects

    Identical; the register sets the shadow ink.

  • Rave

    Q42026Taking projects

    Identical.

Content#

  • The status is literal: "Taking projects", "Booked to March".

Do and don't#

Do

Q42026Taking projects

A real status, dated.

Don't

NEW!!!Check it out

Noise in the issue box.

The corner box is the first thing read on a comic page. It earns that spot by saying something true.

Accessibility#

  • The status dot never stands alone: the status words carry the state.
  • The big mark is ≤ 3 characters.

Props#

PropTypeDefaultDescription
big requiredstringnone≤ 3 characters ("Q4", "K", "//").
small requiredstringnone"2026", "No. 01".
status requiredReactNodenoneThe status line ("Taking projects").
dotInkRefnoneA status dot before the line (never alone).
shadowInkInkRefthe register's shadow inkThe hard shadow's ink (default the register's shadow ink).
placeAreanoneIn art panels: the area of the 3 × 3 placement grid.

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

Tokens#

System tokens (12)

Its own properties (11)

  • --mk-corner-box-big-size
  • --mk-corner-box-big-track
  • --mk-corner-box-big-wdth
  • --mk-corner-box-leading
  • --mk-corner-box-shadow-ink
  • --mk-corner-box-small-leading
  • --mk-corner-box-small-size
  • --mk-corner-box-small-wdth
  • --mk-cx-line-ink
  • --mk-cx-shadow
  • --mk-cx-shadow-ink

Scanned from its CSS at build and checked against its registry entry; 8 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).
  • PatchreactCornerBox never runs past its column: in a narrow one under wide text spacing its small line wraps instead of spilling. Read the whole entry