mdxui.dev
npm7.0.0-alpha.0
Alpha: Ships on npm at 7.0.0-alpha.07.0.0-alpha.0

page-head

A plain page heading: a title and one line, with no actions.

View as JSON
From Benchlist › 404directoryOpen the frame

When to use

Use a page-head to title an inner page: terms, a contact page, a 404, a blog index with no list. It holds a title of 64 characters and a lede of 200, and nothing else.

A page that sells needs actions, so it opens on a hero. A listing in a directory opens on a product-head.

Write the title as the name of the page, and the lede as where the reader is and what to do next.

Use instead
  • hero: the page opens with a claim and actions

The record

pages/benchlist/404.json, section 1
{
  "kind": "section",
  "shell": { "inset": "contained", "density": "section" },
  "block": {
    "type": "page-head",
    "title": "No bench page here.",
    "lede": "This worked example builds one bench in full, Kiln room 4. The other listings link here."
  }
}

Smallest that parses

{ "type": "page-head", "title": "No bench page here." }

Fields and bounds

From @mdxui/site@7.0.0-alpha.0. A count reads as min–max × item; a string bound is its maximum length in characters, and links its refusal.

PropType and boundRequired
titlestring ≤64yes
ledestring ≤200no

Variants and counts

One layout: a title and an optional lede.

page-headopen

One record in five Themes

directoryBenchlist’s ownopen
certificateopen
vaultlineopen
quaypointopen
callboardopen

Shells

paperopen
tintopen
plateopen
glassopen

In three Businesses

Carried by the article and directory-list Templates. Seen on pages/benchlist/404.json, section 1.

Benchlist › 404 · directoryA directory heads its about page and its terms.
Diffkeel › 404 · certificateA developer tool heads its contact page and its 404.
Harbor tides › 404 · quaypointAn API product heads its 404 and its sent page with one plain line each.

Do and do not

Doopen
A 404 headed in four words, with one line of where the reader is.
Don’topen
A landing claim set as a page-head has no actions, so the reader has nowhere to go.
Doopen
A lede of one short sentence.
Don’trefused
"lede": "These terms cover every page of Harbor tides, every call to its API, every webhook it sends and every table it prints, and they apply from the first call, whichever plan you choose and whichever berth you ask about."
SectionSchema.safeParse(record)block.lede215 charactersToo big: expected string to have <=200 characters
A lede that runs past 200 characters is refused at its path.

Accessibility

Check, on the exemplar renderLimitNowPass
Skipped heading levels00yes
Unnamed nav landmarks00 of 0yes
Scroll regions a keyboard cannot reach00 of 0yes
Copy controls that announce the resultall0 of 0yes
Images and icons with no text alternative00yes

Text pairs below AA across the 5 Themes and every scheme they emit: 5. See Render checks.

  • Landmark The page-head sits first in main. It adds no landmark.
  • Heading level The title renders as the page h1. Use it instead of a hero, never beside one.
  • Focus order Nothing in it takes focus.
HeroesheroUse it for the page opens with a claim and actions.