Skip to content
Site volume
Colourway

Print kit

Tape

Masking or clear tape that pins a print to the page. The tape may lean; the print stays square.

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

Tape pins a print, a cover or a photo to the page. The strips have serrated, seeded ends, a masking or clear tone and a soft contact shadow, and sit on the host's frame edge.

Example#

Look of this example
Live render of examples/tape/basic.tsx

Usage#

Use tape to hold art onto the page: a cover pinned to a case study, a photo on a mood board, a sticker sheet. Masking tape at the corners or a strip across the top edge.

  • Placement. at is top (default), top-left, top-right or corners; length, width and angle adjust it.
  • Tone. masking (default) or clear.
  • Edges only. Tape may cross the frame and the host's art or image, never a text box.

Layer and volume#

Art on the host's frame edge: it may cross the frame and the host's art or image, never a text box. Quiet: hidden. Studio two per view, Press four, Rave six. Its angle is clamped to the volume's tilt cap.

Anatomy#

The parts of examples/tape/basic.tsx, numbered:
  1. StripSerrated ends from the seed, angle clamped to the volume..mk-tape
  2. HostThe art it holds down.[data-mk-layer="art"]

Volume#

  • Quiet

    Hidden.

  • Studio

    Up to two per view.

  • Press

    Up to four.

  • Rave

    Up to six.

Content#

  • Tape carries no words.

Do and don't#

Do

On the frame's edge.

Don't

A strip of tape across the middle of a card's title.

Over the words.

Tape is art and art never sits over a text box (D-B1). On the edge, it reads as holding the object, not hiding it.

Accessibility#

  • aria-hidden.
  • Masking tape is a pale straw yellow with a darker edge; clear tape is white at 58 % (30 % on Night).

Props#

PropTypeDefaultDescription
atTapeAtnone
lengthstring6.5Strip length (default 6.5 rem).
widthstring1.75Strip width (default 1.75 rem).
anglenumber−3.5; corners −34° and +31° as on the motif boardDegrees (default −3.5; corners −34° and +31° as on the motif board).
tone"clear" | "masking"none
seednumbernone
childrenundefinednone

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

Tokens#

System tokens (4)

Its own properties (9)

  • --mk-tape-alpha
  • --mk-tape-angle
  • --mk-tape-clip
  • --mk-tape-edge
  • --mk-tape-fill
  • --mk-tape-length
  • --mk-tape-shadow
  • --mk-tape-width
  • --mk-tile-grain-light

Scanned from its CSS at build and checked against its registry entry.

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).