Alpha: Ships on npm at 7.0.0-alpha.07.0.0-alpha.0

directory-list

A listing of products or places, with search, sort and a pager.

Theme

3 pages in 2 Businesses name directory-list in this build.

Use directory-list for a page of things a directory lists: benches in a city, integrations of an API. One product-list carries up to 50 rows, with a rail of filters, sort links and a pager; each row links to its directory-product page.

Sections in order

Fields that matter

Section typeFieldTypeBoundsRefused as
product-listrows0–50 × object≤50product-list.rows
product-listrows[].namestring ≤321–32product-list.rows.name
product-listrows[].summarystring ≤1201–120product-list.rows.summary
product-listrows[].tag ?string ≤241–24product-list.rows.tag
product-listsort ?0–4 × object≤4product-list.sort
product-listpager.pagesinteger 1–100001–10000product-list.pager.pages
Every field of product-list
FieldTypeReqBoundsRefusal
titlestring ≤481–48product-list.title
notestring ≤241–24product-list.note
railobject—
rail.groups1–4 × objectyes1–4product-list.rail.groups
rail.groups[].labelstring ≤20yes1–20product-list.rail.groups.label
sort0–4 × object≤4product-list.sort
sort[].hrefstring ≤160yes1–160product-list.sort.href
sort[].labelstring ≤16yes1–16product-list.sort.label
sort[].onboolean—
view"list" | "cards"—
views0–2 × object≤2product-list.views
views[].hrefstring ≤160yes1–160product-list.views.href
views[].labelstring ≤16yes1–16product-list.views.label
views[].iconicon or mark name (52)—
views[].onboolean—
rows0–50 × objectyes≤50product-list.rows
rows[].hrefstring ≤160yes1–160product-list.rows.href
rows[].markicon or mark name (52)—
rows[].namestring ≤32yes1–32product-list.rows.name
rows[].summarystring ≤120yes1–120product-list.rows.summary
rows[].tagstring ≤241–24product-list.rows.tag
rows[].notestring ≤321–32product-list.rows.note
pagerobject—
pager.prevstring ≤1601–160product-list.pager.prev
pager.nextstring ≤1601–160product-list.pager.next
pager.pageinteger 1–10000yes1–10000product-list.pager.page
pager.pagesinteger 1–10000yes1–10000product-list.pager.pages
emptystring ≤801–80product-list.empty

Starter record

Benchlistpages/benchlist/home.json6.1 KB directory-list.json
{
  "$schema": "https://next.mdxui.dev/schema.json",
  "theme": "directory",
  "frame": "none",
  "template": "directory-list",
  "title": "Benchlist: a workbench near you, by the hour",
  "description": "Kilns, lathes, looms and benches in shared workshops, booked by the hour, each with its tools, rules and rate.",
  "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": "hero",
      "shell": {"inset":"contained","density":"hero"},
      "block": {
        "type": "hero",
        "layout": "centered",
        "stack": 640,
        "title": "A workbench near you, by the hour.",
        "lede": "Kilns, lathes, looms and benches in shared workshops, booked by the hour. Every listing names its tools, its house rules and its hourly rate.",
        "actions": [
          {"href":"/city/duluth","label":"Browse Duluth","kind":"solid","icon":"map-pin"},
          {"href":"/list-a-bench","label":"List a bench","kind":"ghost"}
        ],
        "fine": ["Rates shown before booking","Free cancellation to 24 hours"]
      }
    },
    {
      "kind": "band",
      "shell": {"inset":"contained","density":"compact"},
      "block": {
        "type": "stats",
        "items": [
          {"value":"10","label":"Benches listed in Duluth"},
          {"value":"$9","label":"Lowest hourly rate listed"},
          {"value":"24 h","label":"Free cancellation before a booking"}
        ]
      }
    },
    {
      "kind": "section",
      "shell": {"inset":"contained","density":"section"},
      "block": {
        "type": "product-list",
        "title": "Benches in Duluth, by kind",
        "note": "8 kinds",
        "view": "cards",
        "views": [
          {"href":"/","label":"Kinds","icon":"layout-grid","on":true},
          {"href":"/city/duluth","label":"List","icon":"list"}
        ],
        "rows": [
          {
            "href": "/city/duluth?kind=kiln",
            "mark": "sparkles",
            "name": "Kiln rooms",
            "summary": "Electric kilns to cone 10, with shelves and posts. Bisque or glaze.",
            "tag": "Clay",
            "note": "2 listed, from $18 an hour"
          },
          {
            "href": "/city/duluth?kind=wood",
            "mark": "blocks",
            "name": "Woodshop benches",
            "summary": "Hardwood benches beside a cabinet saw, jointer and planer.",
            "tag": "Wood",
            "note": "2 listed, from $16 an hour"
          },
          {
            "href": "/city/duluth?kind=metal",
            "mark": "gauge",
            "name": "Metal bays",
            "summary": "A metal lathe with tooling, or a ventilated welding booth.",
            "tag": "Metal",
            "note": "2 listed, from $24 an hour"
          },
          {
            "href": "/city/duluth?kind=print",
            "mark": "files",
            "name": "Print presses",
            "summary": "A tabletop letterpress with type, or a four-color screen press.",
            "tag": "Print",
            "note": "2 listed, from $14 an hour"
          },
          {
            "href": "/city/duluth?kind=textile",
            "mark": "layers",
            "name": "Looms",
            "summary": "A four-shaft floor loom, warped on request a day ahead.",
            "tag": "Textile",
            "note": "1 listed, $12 an hour"
          },
          {
            "href": "/city/duluth?kind=jewelry",
            "mark": "badge-check",
            "name": "Jewelry benches",
            "summary": "A bench pin, flex shaft and torch, in a room with a safe.",
            "tag": "Jewelry",
            "note": "1 listed, $9 an hour"
          },
          {
            "href": "/list-a-bench",
            "mark": "sparkles",
            "name": "Glass studios",
            "summary": "No glass kiln or torch bench is listed yet. A host who lists one sets its rate.",
            "tag": "Glass",
            "note": "0 listed"
          },
          {
            "href": "/list-a-bench",
            "mark": "film",
            "name": "Darkrooms",
            "summary": "No darkroom is listed yet. Enlargers, trays and a sink by the hour.",
            "tag": "Photo",
            "note": "0 listed"
          }
        ]
      }
    },
    {
      "kind": "closing",
      "shell": {"inset":"contained","density":"closing","surface":"tint"},
      "block": {
        "type": "closing",
        "layout": "split",
        "head": {
          "eyebrow": "For hosts",
          "title": "A bench idle on Tuesdays?",
          "lede": "List it with its tools and rules. Benchlist takes 12 percent of each booking and nothing else."
        },
        "stats": [{"value":"12%","label":"Of each booking"},{"value":"2 days","label":"To review a listing"}],
        "actions": [{"href":"/list-a-bench","label":"List a bench","kind":"solid"}]
      }
    },
    {
      "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