Skip to content
Site volume
Colourway

Components

InfoPanel

A dense ruled group with a title, rows between soft rules, and an optional sticky readout from lg.

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

Example#

Look of this example

Your ballpark

Range: $3,200 to $4,800

Timeline: 4 to 6 weeks

Live render of examples/info-panel/basic.tsx

Usage#

Use an info panel for a dense group of related facts that people scan: the estimator's running total, a project's details, a summary next to a form. Rows sit between soft rules; there is no shadow.

  • title in the card heading role and optional actions at the end of the header.
  • sticky keeps it in view beside a long form from the lg width; on phones it stays in the flow.
  • Plates. White or stock. For a group that is a single item people open, use a Card.

Anatomy#

Your ballpark

Range: $3,200 to $4,800

Timeline: 4 to 6 weeks

The parts of examples/info-panel/basic.tsx, numbered:
  1. Headerdata-mk-part="header"
  2. Titledata-mk-part="title"
  3. Rowsdata-mk-part="rows"

Volume#

Reading layer: identical at every volume.

  • Quiet

    Your ballpark

    Range: $3,200 to $4,800

    Timeline: 4 to 6 weeks

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

  • Studio

    Your ballpark

    Range: $3,200 to $4,800

    Timeline: 4 to 6 weeks

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

  • Press

    Your ballpark

    Range: $3,200 to $4,800

    Timeline: 4 to 6 weeks

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

  • Rave

    Your ballpark

    Range: $3,200 to $4,800

    Timeline: 4 to 6 weeks

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

Content#

  • Title: what the numbers are, such as "Your ballpark".
  • Rows lead with the label, then the value: "Timeline: 4 to 6 weeks".
  • Keep it to facts; explanations go in the page next to it.

Do and don't#

Do

Your ballpark

Range: $3,200 to $4,800

Timeline: 4 to 6 weeks

Facts to scan.

Don't

Your ballpark

Our estimates are based on many factors, including scope, complexity, integrations, content readiness and the phase of the moon.

A paragraph where the numbers should be.

An info panel is read at a glance. Prose belongs in the page; the panel keeps the figures.

Accessibility#

  • sticky pins it under the header only from the lg viewport; on phones it stays in the flow.
  • Prices stay literal (D-I2).

Props#

PropTypeDefaultDescription
titleReactNodenone
titleLevel2 | 3 | 43The title's level (default 3).
actionsReactNodenone
plate"stock" | "white"whiteDefault `white`.
stickybooleannone
renderRenderPropnone
childrenReactNodenone

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

Tokens#

System tokens (9)

Its own properties (1)

  • --mk-header-h

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