Skip to content
Site volume
Colourway

Components

Plate

An opaque reading surface that re-scopes the text, rule and focus roles, so components read right on any plate.

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

Example#

Look of this example

Numbers you can check, printed on the slab.

Live render of examples/plate/basic.tsx

Usage#

Use a plate when a group of words or controls needs its own opaque surface: a callout band, a proof figure, a slab of numbers, an action band. A Section already prints its children on a plate; reach for Plate inside a section.

  • Kinds. white (default), stock, sunken, slab, action (ink text on the yellow, for a CTA band) and the line plates, whose generated cut is body-safe by construction (D-B8).
  • Re-scoping. A plate sets data-mk-plate, which re-points every contextual ink, so a Button or a Link on the slab prints in the slab's pair without extra CSS.
  • pad, rule and radius give it padding, a 2 px ink rule and the plate radius.
  • Two deep at most. A plate inside a plate inside a plate is a development warning: flatten the layout instead.

Anatomy#

Numbers you can check, printed on the slab.

The parts of examples/plate/basic.tsx, numbered:
  1. PlateOpaque, with its own text and rule inks..mk-plate
  2. ContentPrints in the plate's pair..mk-plate p

Volume#

Plates are reading layer: they print the same at every volume. Only line plates follow the volume's line-plate rule, from a tint with a rule at Quiet to the full plate from Studio.

  • Quiet

    Numbers you can check, printed on the slab.

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

  • Studio

    Numbers you can check, printed on the slab.

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

  • Press

    Numbers you can check, printed on the slab.

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

  • Rave

    Numbers you can check, printed on the slab.

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

Content#

  • A plate holds a complete thought: a heading and its sentence, a stat and its label.
  • Slab plates suit numbers and proof; keep long reading on paper.

Do and don't#

Do

98 Lighthouse, 0.7 s to the first paint.

One plate, one job.

Don't

98 Lighthouse.

Three nested plates fighting for edges.

Each plate is a surface with its own inks. Nesting them deep piles up rules and contrast changes without adding meaning.

Accessibility#

  • A plate is always opaque, so text on it keeps its tested contrast pair at every volume.
  • data-mk-layer="plate" marks it for the press check's two-layer walker.

Props#

PropTypeDefaultDescription
kind"action" | "custom-apps" | "growth" | "maxos" | "slab" | "software" | "stock" | "sunken" | "websites" | "white"whiteDefault `white`.
pad"lg" | "md" | "none" | "sm"md16 / 24 / 32 px (phones 16 / 20 / 24); default `md`.
rulebooleannoneA 2 px `--mk-text` rule.
radiusbooleannone`--mk-radius-plate`.
renderRenderPropnone
children requiredReactNodenone

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

Tokens#

System tokens (8)

Its own properties (1)

  • --mk-plate-pad

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