{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "price-list",
  "name": "Price list",
  "category": "Sections",
  "description": "A menu-style list of items with dotted leaders to the price, for restaurants, salons, studios and services.",
  "tags": [
    "price list",
    "menu",
    "restaurant menu",
    "services",
    "rates",
    "dishes",
    "food",
    "cafe",
    "salon"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": "decision",
    "intents": [
      "restaurant menu",
      "service prices",
      "salon price list",
      "menu with prices",
      "rates"
    ],
    "prominence": "medium",
    "density": "medium",
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [
      "pricing",
      "table"
    ],
    "avoid": "Menus as images or PDFs."
  },
  "url": "https://mian.ro/components/price-list",
  "markdownUrl": "https://mian.ro/ai/components/price-list.md",
  "classes": [
    {
      "name": "mn-pricelist",
      "description": "The list (a <ul>)."
    },
    {
      "name": "mn-pricelist-item",
      "description": "One item: name, price and description."
    },
    {
      "name": "mn-pricelist-name",
      "description": "The name (<h3>), followed by a dotted leader."
    },
    {
      "name": "mn-pricelist-price",
      "description": "The price, in tabular figures."
    },
    {
      "name": "mn-pricelist-desc",
      "description": "A description under the name; badges for diet or spice."
    }
  ],
  "accessibility": [
    "Leaders are CSS only, so screen readers hear “Dan dan mian, €14”, not rows of dots.",
    "Write allergens and diets as words (e.g. “Vegan”), not just symbols."
  ],
  "examples": [
    {
      "title": "Menu",
      "description": null,
      "html": "<ul class=\"mn-pricelist\" style=\"max-width:34rem\">\n  <li class=\"mn-pricelist-item\"><h3 class=\"mn-pricelist-name\">Beef lamian</h3><span class=\"mn-pricelist-price\">€16</span><p class=\"mn-pricelist-desc\">Hand-pulled noodles, 18-hour beef broth, radish, chilli oil.</p></li>\n  <li class=\"mn-pricelist-item\"><h3 class=\"mn-pricelist-name\">Dan dan mian</h3><span class=\"mn-pricelist-price\">€14</span><p class=\"mn-pricelist-desc\">Sesame, Sichuan pepper, pickled mustard greens. <span class=\"mn-badge mn-badge-soft mn-danger mn-badge-sm\">Spicy</span></p></li>\n  <li class=\"mn-pricelist-item\"><h3 class=\"mn-pricelist-name\">Cold sesame soba</h3><span class=\"mn-pricelist-price\">€13</span><p class=\"mn-pricelist-desc\">Buckwheat noodles, cucumber, toasted sesame. <span class=\"mn-badge mn-badge-soft mn-success mn-badge-sm\">Vegan</span></p></li>\n</ul>"
    }
  ],
  "css": ".mn-pricelist { display: grid; gap: 1.6rem; margin: 0; padding: 0; list-style: none; }\n.mn-pricelist-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .75rem; align-items: baseline; }\n.mn-pricelist-name { display: flex; align-items: baseline; gap: .6rem; min-width: 0; margin: 0; font: 600 1.0625rem/1.35 var(--mn-font-heading); color: var(--mn-fg); }\n.mn-pricelist-name::after { content: \"\"; flex: 1 1 1.5rem; min-width: 1.5rem; border-bottom: 1.5px dotted var(--mn-input); translate: 0 -.3em; }\n.mn-pricelist-price { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mn-fg); }\n.mn-pricelist-desc { grid-column: 1 / -1; margin: 0; max-width: 40em; color: var(--mn-muted); font-size: .9375rem; line-height: 1.55; }\n.mn-pricelist-desc .mn-badge { margin-inline-start: .35rem; vertical-align: 1px; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/price-list.json"
  }
}