Alpha: Ships on npm at 7.0.0-alpha.07.0.0-alpha.0
directory-product
One listing on the split frame: a product head, facts and plans.
Theme
BenchlistDirectory
directoryown7 sections
Harbor tidesAPI product
quaypointown5 sections
VanrosterSaaS
callboardown10 sections
3 pages in 3 Businesses name directory-product in this build.
Use directory-product for one thing a directory lists: a bench, a room, an integration, a plan. The product head names it and carries its actions, facts answer the questions a buyer compares on, and plans price it. A listing page links back to it from directory-list.
Sections in order
Fields that matter
| Section type | Field | Type | Bounds | Refused as |
|---|---|---|---|---|
| product-head | name | string ≤32 | 1–32 | product-head.name |
| product-head | summary | string ≤120 | 1–120 | product-head.summary |
| product-head | chips ? | 0–9 × object | ≤9 | product-head.chips |
| product-head | actions | 1–2 × object | 1–2 | product-head.actions |
| facts | items | 1–16 × object | 1–16 | facts.items |
| facts | items[].label | string ≤24 | 1–24 | facts.items.label |
| facts | items[].value | string ≤80 | 1–80 | facts.items.value |
Every field of product-head
| Field | Type | Req | Bounds | Refusal |
|---|---|---|---|---|
mark | icon or mark name (52) | — | ||
name | string ≤32 | yes | 1–32 | product-head.name |
summary | string ≤120 | yes | 1–120 | product-head.summary |
chips | 0–9 × object | ≤9 | product-head.chips | |
chips[].label | string ≤24 | yes | 1–24 | product-head.chips.label |
chips[].href | string ≤160 | 1–160 | product-head.chips.href | |
marks | object | — | ||
marks.openapi | boolean | — | ||
marks.mcp | boolean | — | ||
marks.webhooks | boolean | — | ||
marks.free | boolean | — | ||
actions | 1–2 × object | yes | 1–2 | product-head.actions |
actions[].href | string ≤160 | yes | 1–160 | product-head.actions.href |
actions[].label | string ≤24 | yes | 1–24 | product-head.actions.label |
actions[].kind | "solid" | "ghost" | yes | — | |
actions[].icon | icon or mark name (52) | — | ||
actions[].external | boolean | — |
Every field of facts
| Field | Type | Req | Bounds | Refusal |
|---|---|---|---|---|
title | string ≤48 | 1–48 | facts.title | |
items | 1–16 × object | yes | 1–16 | facts.items |
items[].label | string ≤24 | yes | 1–24 | facts.items.label |
items[].value | string ≤80 | yes | 1–80 | facts.items.value |
items[].href | string ≤160 | 1–160 | facts.items.href | |
items[].code | boolean | — |
Starter record
pages/benchlist/bench/kiln-room-4.json5.2 KB directory-product.json{
"$schema": "https://next.mdxui.dev/schema.json",
"theme": "directory",
"frame": "split",
"template": "directory-product",
"title": "Kiln room 4 · Benchlist",
"description": "Two electric kilns to cone 10 in a shared clay studio in Lincoln Park, Duluth. $22 an hour.",
"sections": [
{
"kind": "nav",
"shell": {"inset":"bleed","density":"none","surface":"glass","sticky":true},
"block": {
"type": "nav",
"menu": "none",
"brand": {"href":"/","text":"Benchlist","mark":"layout-grid"},
"links": [["/city/duluth","Duluth"],["/about","About"]],
"cta": {"href":"/list-a-bench","label":"List a bench"},
"search": {"action":"/city/duluth","placeholder":"Kiln, lathe, loom, press"}
}
},
{
"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"}
]
}
},
{
"kind": "section",
"shell": {"inset":"contained","density":"section","aside":true},
"block": {
"type": "facts",
"title": "At a glance",
"items": [
{"label":"Rate","value":"$22 an hour"},
{"label":"Minimum","value":"4 hours"},
{"label":"Kilns","value":"2 electric, to cone 10"},
{"label":"Each holds","value":"7 cubic feet"},
{"label":"Open","value":"07:00 to 22:00, daily"},
{"label":"Access","value":"Door code by text"},
{"label":"Where","value":"Lincoln Park, Duluth","href":"/city/duluth"},
{"label":"Listing","value":"KR-4","code":true}
]
}
},
{
"kind": "section",
"shell": {"inset":"contained","density":"section","id":"rates"},
"block": {
"type": "plan-table",
"title": "Rates",
"columns": ["Per hour","Minimum","Fires to"],
"rows": [
{"name":"Bisque firing","cells":["$22","4 hours","cone 04"]},
{"name":"Glaze firing","cells":["$22","6 hours","cone 6 or 10"]},
{"name":"One shelf","cells":["$9","one load","shared firing"],"note":"Loaded by the studio"}
],
"foot": "Rates include power and kiln wash. Cancel free up to 24 hours before."
}
},
{
"kind": "section",
"shell": {"inset":"contained","density":"section"},
"block": {
"type": "text-stack",
"layout": "grid",
"head": {"eyebrow":"House rules","title":"Four rules in this room."},
"items": [
{
"title": "Load your own",
"text": "You load and unload. The studio checks the shelves before the first firing."
},
{
"title": "Dry ware only",
"text": "Ware goes in bone dry. Wet ware cracks shelves and is refused at the door."
},
{"title":"Cones supplied","text":"Witness cones and a firing log sit on the shelf by kiln A."},
{
"title": "Leave it cool",
"text": "Never open a kiln above 150 degrees. The next booking waits for it."
}
]
}
},
{
"kind": "section",
"shell": {"inset":"contained","density":"section"},
"block": {
"type": "faq",
"head": {"eyebrow":"Questions","title":"Before you book."},
"items": [
{"q":"How do I get in?","a":"A door code arrives by text one hour before the booking starts."},
{
"q": "What if a firing runs long?",
"a": "The kiln finishes. Hours past the booking bill at the same rate, and the next booking moves to the other kiln."
},
{"q":"Can I bring my own clay?","a":"Yes. Any clay body rated to the cone you fire is welcome."}
]
}
},
{
"kind": "footer",
"shell": {"inset":"contained","density":"footer"},
"block": {
"type": "footer",
"layout": "areas",
"brand": {"href":"/","text":"Benchlist","mark":"layout-grid"},
"blurb": "Shared workshop benches by the hour. Benchlist lists tools and rooms, never people.",
"columns": [
{
"title": "Browse",
"links": [["/city/duluth","Benches in Duluth"],["/bench/kiln-room-4","Kiln room 4"]]
},
{"title":"Hosts","links":[["/list-a-bench","List a bench"],["/about","About"],["/terms","Terms"]]},
{"title":"For agents","links":[["/records.zip","Site records (.zip)"]]}
],
"note": [
"Benchlist is a worked example on mdxui.dev, not a customer.",
"Rendered by @mdxui/site. Search, sorting and forms here do not run."
]
}
}
]
}