Skip to content
Site volume
Colourway

Components

ScreenshotFrame

A client site's screenshot framed as a printed plate, with the domain linking out to the live site.

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

Example#

Look of this example
Live render of examples/screenshot-frame/basic.tsx

Usage#

Use a screenshot frame for a client's site in a case study or a card: the untouched image on a white plate, a top bar with the domain in a slug pill, and a link out so visitors can try the real thing (D-I1).

  • device is desktop or tablet; phones go in a PhoneFrame.
  • href links the frame to the live site; with target="_blank" it adds "(opens in a new tab)" for screen readers.
  • marks adds the print kit's crop marks around the plate as art.
  • Never tilted. It shows words, so it sits square (D-B9).

Anatomy#

The parts of examples/screenshot-frame/basic.tsx, numbered:
  1. Bardata-mk-part="bar"
  2. Slugdata-mk-part="slug"
  3. Shotdata-mk-part="shot"

Volume#

Reading layer: identical at every volume. Crop marks, when on, follow the volume.

  • Quiet

    fernlight.example

    Docs, forms, legal and long reads. Flat inks, no art in motion.

  • Studio

    fernlight.example

    The site default. Art on its own plates, one display moment per view.

  • Press

    fernlight.example

    Hero moments, covers and campaigns. Halftone fields and the second ink.

  • Rave

    fernlight.example

    Launches, posters and the 404. Every ink, and the words still win.

Content#

  • The slug is the site's domain: "fernlight.example".
  • The alt text says which page it is and the one thing to notice.

Do and don't#

Do

fernlight.example

Square, flat, linked.

Don't

A screenshot rotated 6 degrees with a drop shadow, like a photo on a desk.

Tilted words.

A screenshot is full of words. Tilted text is harder to read and breaks the square-text rule (D-B9).

Accessibility#

  • With newTab the link says "(opens in a new tab)" to screen readers.
  • Never tilted: it shows words (D-B9).

Props#

PropTypeDefaultDescription
domain requiredstringnonee.g. "fernlight.example".
children requiredReactNodenoneThe untouched screenshot (`<img>` or `next/image`).
device"desktop" | "tablet"none
hrefstringnoneThe live site.
newTabbooleannoneOpen the live site in a new tab (adds the hidden note).
captionReactNodenone
marksbooleannone
newTabLabelstring"(opens in a new tabThe hidden note for new tabs (default "(opens in a new tab)").

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

Tokens#

System tokens (10)

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

  • MinorreactSection with its plate and Art slot, Plate, VolumeScope, PageHero, SectionHead, Eyebrow, Card, LineCard, InfoPanel, Stack, Cluster, Grid, Container, Main, Rule and the FittedLine client fitter; Navbar with the NavDisclosure mega panels, Footer, FooterMap, BuildStamp, SkipLink, ActionDock and VisitorControls; the Table parts, ComparisonTable with the one-tier switcher, SpecStrip, Numeral, Stat, StatGroup, StatusChip, Badge and ScoreDial; Prose with mdxComponents, Quote, CodeBlock with CopyButton, Figure, ScreenshotFrame and PhoneFrame; and the brand: the three evolved 2 × 2 options in markGeometry (a Overprint by default, b Paper seam, c Key block) with the pixel-snapped px mode and the one-ink seam variant, logoGeometry with the 1x clear-space frame, Mark, Wordmark, Logo, MaxosMark and LineBadge. Read the whole entry