Skip to content
Site volume
Colourway

Components

SpecStrip

Two to four facts as a description list, one row from md and 2 × 2 below.

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

Example#

Look of this example
Timeline
2 to 6 weeks
Quote
Fixed
Lighthouse
95+
Live render of examples/spec-strip/basic.tsx

Usage#

Use a spec strip for two to four short facts a buyer checks first, side by side: timeline, quote, warranty. It is a description list; PageHero uses it under its keys.

  • Values print in the row title role, or as a numeral with numeric; an href makes a value a link.
  • Layout. One row from md, a 2 × 2 grid below; pairs like "Name 19" and hyphenated words never break.
  • More than four facts, or facts that need a sentence, belong in a table or a list.

Anatomy#

Timeline
2 to 6 weeks
Quote
Fixed
Lighthouse
95+
The parts of examples/spec-strip/basic.tsx, numbered:
  1. Celldata-mk-part="cell"
  2. LabelLabel role..mk-spec-strip-label
  3. ValueRow title, or a numeral..mk-spec-strip-value

Volume#

Reading layer: identical at every volume.

  • Quiet

    Timeline
    2 to 6 weeks
    Quote
    Fixed
    Lighthouse
    95+

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

  • Studio

    Timeline
    2 to 6 weeks
    Quote
    Fixed
    Lighthouse
    95+

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

  • Press

    Timeline
    2 to 6 weeks
    Quote
    Fixed
    Lighthouse
    95+

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

  • Rave

    Timeline
    2 to 6 weeks
    Quote
    Fixed
    Lighthouse
    95+

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

Content#

  • Labels are one word or two: "Timeline", "Quote".
  • Values are short and exact: "2 to 6 weeks", "Fixed", "95+".

Do and don't#

Do

Timeline
2 to 6 weeks
Quote
Fixed
Warranty
2 months

Facts you can check.

Don't

Timeline
Depends on the project
Quote
Let's talk
Warranty
Yes

Answers that answer nothing.

The strip is where a buyer looks for the facts. Vague values waste the most visible spot on the page.

Accessibility#

  • A <dl>: each term is read before its value.
  • Hyphenated words and "Name 19" pairs never break.

Props#

PropTypeDefaultDescription
items requiredreadonly SpecStripItem[]none

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

Tokens#

System tokens (8)

Its own properties (1)

  • --mk-spec-strip-count

Scanned from its CSS at build and checked against its registry entry; 2 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
  • Patchreact, threeReact: the label role (14 px, now 600) prints in --mk-text in Eyebrow, the Card and PageHero eyebrows, SpecStrip labels, the stacked table's cell headers, the Navbar panel's meta and the NavSheet group titles, because no secondary ink reaches the label's floor; placeholders, input start and end text and the select's empty choice print in the new --mk-on-control-2; Art interactive marks no layer, so the 3D stage's own art and plate layers decide (its caption and keys never sit inside an art layer). Read the whole entry
  • PatchreactStatGroup lays out by its own width (a size container), SpecStrip keeps 2 × 2 inside a narrow container and the Navbar's desktop bar also needs a 60rem header, so phone-width specimens on wide screens no longer squeeze; the Navbar bar wraps rather than spills under wide text spacing. Read the whole entry