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

product-head

A listing page header in a directory: mark, name, one sentence, category and tags.

View as JSON
From Benchlist › bench/kiln-room-4directoryOpen the frame

When to use

Use a product head at the top of a listing page in a directory. It holds a mark, a name of 32 characters, a summary of 120, up to nine chips and one or two actions, with marks for an OpenAPI file, an MCP server, webhooks or a free plan.

Every listing gets at least one action. For a product landing rather than a listing, use hero.

Write the summary as what the listing does for the reader, in one sentence.

Use instead
  • hero: a product landing, not a listing

The record

pages/benchlist/bench/kiln-room-4.json, section 1
{
  "kind": "section",
  "shell": { "inset": "contained", "density": "section" },
  "block": {
    "type": "product-head",
    "mark": "sparkles",
    "name": "Kiln room 4",
    "summary": "Two electric kilns to cone 10 in a shared clay studio in Lincoln Park, Duluth.",
    "chips": [
      { "label": "Kiln room", "href": "/city/duluth?kind=kiln" },
      { "label": "Duluth", "href": "/city/duluth" },
      { "label": "Lincoln Park" },
      { "label": "Cone 10" }
    ],
    "actions": [
      { "href": "mailto:kiln-room-4@benchlist.example?subject=Booking%20Kiln%20room%204", "label": "Book by email", "kind": "solid" },
      { "href": "#rates", "label": "See the rates", "kind": "ghost" }
    ]
  }
}

Smallest that parses

{
  "type": "product-head",
  "name": "Kiln room 4",
  "summary": "Two electric kilns to cone 10 in a shared clay studio in Lincoln Park, Duluth.",
  "actions": [
    { "href": "mailto:kiln-room-4@benchlist.example?subject=Booking%20Kiln%20room%204", "label": "Book by email", "kind": "solid" }
  ]
}

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
markicon or mark name (52)no
namestring ≤32yes
summarystring ≤120yes
chips0–9 × objectno
chips[].labelstring ≤24yes
chips[].hrefstring ≤160no
marksobjectno
marks.openapibooleanno
marks.mcpbooleanno
marks.webhooksbooleanno
marks.freebooleanno
actions1–2 × objectyes
actions[].hrefstring ≤160yes
actions[].labelstring ≤24yes
actions[].kind"solid" | "ghost"yes
actions[].iconicon or mark name (52)no
actions[].externalbooleanno

Variants and counts

One layout. On a split frame, set aside on its shell to pin it in the side column.

product-headopen

One record in five Themes

directoryBenchlist’s ownopen
certificateopen
vaultlineopen
quaypointopen
callboardopen

Shells

paperopen
tintopen
plateopen
glassopen

In three Businesses

Carried by the directory-product Template. Seen on pages/benchlist/bench/kiln-room-4.json, section 1.

Benchlist › bench/kiln-room-4 · directoryA directory heads each bench page with its size and city.
Harbor tides › integrations/chartplot · quaypointAn API product heads its Chartplot integration page.
Vanroster › product/dispatch · callboardA scheduling product heads each feature page it lists.

Do and do not

Doopen
One action that says what the reader gets.
Don’trefused
"actions": []
SectionSchema.safeParse(record)block.actions0 itemsToo small: expected array to have >=1 items
A listing with no action is refused: a product head holds one or two.
Doopen
Two chips: a category and a capability.
Don’topen
Nine chips read as a tag cloud, and none is the category.

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 head sits first in main. It adds no landmark.
  • Heading level The name renders as the page h1. The capability marks are a list named Has.
  • Focus order Tab runs the chips with links, then the actions.
HeroesheroUse it for a product landing, not a listing.