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

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 typeFieldTypeBoundsRefused as
product-headnamestring ≤321–32product-head.name
product-headsummarystring ≤1201–120product-head.summary
product-headchips ?0–9 × object≤9product-head.chips
product-headactions1–2 × object1–2product-head.actions
factsitems1–16 × object1–16facts.items
factsitems[].labelstring ≤241–24facts.items.label
factsitems[].valuestring ≤801–80facts.items.value
Every field of product-head
FieldTypeReqBoundsRefusal
markicon or mark name (52)—
namestring ≤32yes1–32product-head.name
summarystring ≤120yes1–120product-head.summary
chips0–9 × object≤9product-head.chips
chips[].labelstring ≤24yes1–24product-head.chips.label
chips[].hrefstring ≤1601–160product-head.chips.href
marksobject—
marks.openapiboolean—
marks.mcpboolean—
marks.webhooksboolean—
marks.freeboolean—
actions1–2 × objectyes1–2product-head.actions
actions[].hrefstring ≤160yes1–160product-head.actions.href
actions[].labelstring ≤24yes1–24product-head.actions.label
actions[].kind"solid" | "ghost"yes—
actions[].iconicon or mark name (52)—
actions[].externalboolean—
Every field of facts
FieldTypeReqBoundsRefusal
titlestring ≤481–48facts.title
items1–16 × objectyes1–16facts.items
items[].labelstring ≤24yes1–24facts.items.label
items[].valuestring ≤80yes1–80facts.items.value
items[].hrefstring ≤1601–160facts.items.href
items[].codeboolean—

Starter record

Benchlistpages/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."
        ]
      }
    }
  ]
}

Other Templates

Sidework
blog

5 pages · 4 of 6 Businesses

Sidework
post

4 pages · 4 of 6 Businesses

Ledgerhouse
article

24 pages · 6 of 6 Businesses

Ledgerhouse
contact

6 pages · 6 of 6 Businesses

On this page