Skip to content
Site volume
Colourway

Components

PageHero

One per page: eyebrow and status, the display title with an accent line, the sub, two keys and the spec strip.

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

Example#

Look of this example

Websites for small businesses

Taking projects · Q4 2026

Websites that win customers.

Hand-coded pages for trades and studios like Fernlight.

Timeline
2 to 6 weeks
Quote
Fixed
Warranty
2 months
Live render of examples/page-hero/basic.tsx

Usage#

Every page has exactly one PageHero, at the top: what the page is, in display type, with the next step. It is a Section rendered as a header.

  • The title is one or two lines; the second is the accent line, printed in the line's ink (line) or the link ink. It is the page's display moment and carries the second ink at rest (D-D6).
  • Around it. eyebrow and status above, sub under it (18 px, 36 em at most), then actions (one action key and one secondary) and specs, a strip of short facts.
  • Art. aside takes an <Art> beside the words from lg; asideOnPhone hides it by default. volume="up" steps the hero one volume louder than the page (D-B2).
  • Never centred in a full screen. The words start at the top so the first screen shows content, not a void.

Anatomy#

Websites for small businesses

Taking projects · Q4 2026

Websites that win customers.

Hand-coded pages for trades and studios like Fernlight.

Timeline
2 to 6 weeks
Quote
Fixed
Warranty
2 months
The parts of examples/page-hero/basic.tsx, numbered:
  1. Eyebrowdata-mk-part="eyebrow"
  2. Metadata-mk-part="meta"
  3. Titledata-mk-part="title"
  4. Subdata-mk-part="sub"
  5. SpecsShort facts as a SpecStrip..mk-page-hero-specs

Volume#

The words never move. From Press the hero's art and the second ink grow louder; at Quiet the title loses a little weight and the art stays still.

  • Quiet

    Websites for small businesses

    Taking projects · Q4 2026

    Websites that win customers.

    Hand-coded pages for trades and studios like Fernlight.

    Timeline
    2 to 6 weeks
    Quote
    Fixed
    Warranty
    2 months

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

  • Studio

    Websites for small businesses

    Taking projects · Q4 2026

    Websites that win customers.

    Hand-coded pages for trades and studios like Fernlight.

    Timeline
    2 to 6 weeks
    Quote
    Fixed
    Warranty
    2 months

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

  • Press

    Websites for small businesses

    Taking projects · Q4 2026

    Websites that win customers.

    Hand-coded pages for trades and studios like Fernlight.

    Timeline
    2 to 6 weeks
    Quote
    Fixed
    Warranty
    2 months

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

  • Rave

    Websites for small businesses

    Taking projects · Q4 2026

    Websites that win customers.

    Hand-coded pages for trades and studios like Fernlight.

    Timeline
    2 to 6 weeks
    Quote
    Fixed
    Warranty
    2 months

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

Content#

  • Title: what the page offers, in under ten words. A joke is fine when the sub says plainly what the page is (D-I2).
  • Sub: one sentence that a stranger would understand.
  • Actions: the page's main verb on the action key, a lower-stakes alternative beside it.
  • Specs: three or four facts a buyer checks, such as timeline, quote and warranty.

Do and don't#

Do

Websites for small businesses

Taking projects · Q4 2026

Websites that win customers.

Hand-coded pages for trades and studios like Fernlight.

Timeline
2 to 6 weeks
Quote
Fixed
Warranty
2 months

One hero, with the page's one display moment.

Don't

Two PageHeros on one page: a hero, then another hero halfway down.

Competing heroes.

A page has one first impression. A second hero splits attention and breaks the one-display-moment rule at Studio.

Accessibility#

  • The title is the page's only h1; the accent line is part of it, so it reads as one sentence.
  • The aside is art: hidden below lg by default and never under the title.
  • The hero is never centred in 100svh, so the first screen shows the words, not empty paper.

Props#

PropTypeDefaultDescription
eyebrowReactNodenone
statusStatusChipPropsnone
title requiredstring | readonly [string, string]noneOne line, or two: the second is the accent line.
line"custom-apps" | "growth" | "maxos" | "software" | "websites"noneThe accent line prints in this line's text ink (else `--mk-link`).
subReactNodenone
specsreadonly SpecStripItem[]none
actionsReactNodenoneOne `action` key and one `secondary`.
asideReactElement<unknown, string | React.JSXElementConstructor<any>>noneAn `<Art>` shown from lg.
asideOnPhone"above" | "below" | "hide"noneBelow lg the aside hides (default), or goes above or below.
volume"inherit" | "up"none
stock"bone" | "newsprint" | "night" | "pulp" | "white"none

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

Tokens#

System tokens (10)

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