{
  "name": "inventory-list-stock",
  "kind": "block",
  "primary": "section",
  "page": "/catalog/ui-patterns/v050-content-blocks/v050-content-blocks.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<section>\n    <card-ui>\n      <header>\n        <text-ui strong>Inventory</text-ui>\n        <text-ui size=\"sm\" color=\"subtle\">128 SKUs · 3 below threshold</text-ui>\n      </header>\n      <section bleed>\n        <table-ui>\n          <thead>\n            <tr>\n              <th>Product</th>\n              <th>SKU</th>\n              <th>Stock</th>\n              <th>Status</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr>\n              <td><text-ui>Wireless mouse</text-ui></td>\n              <td><text-ui color=\"subtle\">WM-4421</text-ui></td>\n              <td><progress-ui value=\"71\" total=\"100\" color=\"success\"></progress-ui></td>\n              <td><badge-ui text=\"In stock\" variant=\"success\" size=\"sm\"></badge-ui></td>\n            </tr>\n            <tr>\n              <td><text-ui>USB-C cable 2m</text-ui></td>\n              <td><text-ui color=\"subtle\">UC-2200</text-ui></td>\n              <td><progress-ui value=\"12\" total=\"100\" color=\"warning\"></progress-ui></td>\n              <td><badge-ui text=\"Low\" variant=\"warning\" size=\"sm\"></badge-ui></td>\n            </tr>\n            <tr>\n              <td><text-ui>Mechanical keyboard</text-ui></td>\n              <td><text-ui color=\"subtle\">KB-8801</text-ui></td>\n              <td><progress-ui value=\"0\" total=\"100\" color=\"danger\"></progress-ui></td>\n              <td><badge-ui text=\"Out of stock\" variant=\"danger\" size=\"sm\"></badge-ui></td>\n            </tr>\n            <tr>\n              <td><text-ui>Headphone stand</text-ui></td>\n              <td><text-ui color=\"subtle\">HS-1102</text-ui></td>\n              <td><progress-ui value=\"78\" total=\"100\" color=\"success\"></progress-ui></td>\n              <td><badge-ui text=\"In stock\" variant=\"success\" size=\"sm\"></badge-ui></td>\n            </tr>\n          </tbody>\n        </table-ui>\n      </section>\n    </card-ui>\n  </section>",
  "source": "catalog/ui-patterns/v050-content-blocks/v050-content-blocks.contents.html",
  "metadata": {
    "domain": "data",
    "description": "Inventory table with product name, SKU, stock fill-bar, and status badge per row; threshold-alert highlights below.",
    "keywords": [
      "inventory",
      "stock",
      "list",
      "products",
      "SKU",
      "warehouse",
      "alert",
      "threshold",
      "low-stock",
      "data",
      "ecommerce",
      "table",
      "badge",
      "progress"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "strong": true,
      "textContent": "Inventory"
    },
    {
      "id": "text-2",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "128 SKUs · 3 below threshold"
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "text",
        "text-2"
      ]
    },
    {
      "id": "text-3",
      "component": "Text",
      "textContent": "Product",
      "variant": "body"
    },
    {
      "id": "text-4",
      "component": "Text",
      "textContent": "SKU",
      "variant": "body"
    },
    {
      "id": "text-5",
      "component": "Text",
      "textContent": "Stock",
      "variant": "body"
    },
    {
      "id": "text-6",
      "component": "Text",
      "textContent": "Status",
      "variant": "body"
    },
    {
      "id": "column-2",
      "component": "Column",
      "children": [
        "text-3",
        "text-4",
        "text-5",
        "text-6"
      ]
    },
    {
      "id": "text-7",
      "component": "Text",
      "textContent": "Wireless mouse"
    },
    {
      "id": "text-8",
      "component": "Text",
      "color": "subtle",
      "textContent": "WM-4421"
    },
    {
      "id": "progress",
      "component": "Progress",
      "value": 71
    },
    {
      "id": "badge",
      "component": "Badge",
      "size": "sm",
      "text": "In stock",
      "variant": "success"
    },
    {
      "id": "column-8",
      "component": "Column",
      "children": [
        "text-7",
        "text-8",
        "progress",
        "badge"
      ]
    },
    {
      "id": "text-9",
      "component": "Text",
      "textContent": "USB-C cable 2m"
    },
    {
      "id": "text-10",
      "component": "Text",
      "color": "subtle",
      "textContent": "UC-2200"
    },
    {
      "id": "progress-2",
      "component": "Progress",
      "value": 12
    },
    {
      "id": "badge-2",
      "component": "Badge",
      "size": "sm",
      "text": "Low",
      "variant": "warning"
    },
    {
      "id": "column-13",
      "component": "Column",
      "children": [
        "text-9",
        "text-10",
        "progress-2",
        "badge-2"
      ]
    },
    {
      "id": "text-11",
      "component": "Text",
      "textContent": "Mechanical keyboard"
    },
    {
      "id": "text-12",
      "component": "Text",
      "color": "subtle",
      "textContent": "KB-8801"
    },
    {
      "id": "progress-3",
      "component": "Progress",
      "value": 0
    },
    {
      "id": "badge-3",
      "component": "Badge",
      "size": "sm",
      "text": "Out of stock",
      "variant": "danger"
    },
    {
      "id": "column-18",
      "component": "Column",
      "children": [
        "text-11",
        "text-12",
        "progress-3",
        "badge-3"
      ]
    },
    {
      "id": "text-13",
      "component": "Text",
      "textContent": "Headphone stand"
    },
    {
      "id": "text-14",
      "component": "Text",
      "color": "subtle",
      "textContent": "HS-1102"
    },
    {
      "id": "progress-4",
      "component": "Progress",
      "value": 78
    },
    {
      "id": "badge-4",
      "component": "Badge",
      "size": "sm",
      "text": "In stock",
      "variant": "success"
    },
    {
      "id": "column-23",
      "component": "Column",
      "children": [
        "text-13",
        "text-14",
        "progress-4",
        "badge-4"
      ]
    },
    {
      "id": "column-7",
      "component": "Column",
      "children": [
        "column-8",
        "column-13",
        "column-18",
        "column-23"
      ]
    },
    {
      "id": "table",
      "component": "Table",
      "children": [
        "column-2",
        "column-7"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "bleed": true,
      "children": [
        "column-28"
      ]
    },
    {
      "id": "column-28",
      "component": "Column",
      "children": [
        "table"
      ]
    },
    {
      "id": "card",
      "component": "Card",
      "children": [
        "header",
        "section"
      ]
    },
    {
      "id": "root",
      "component": "Section",
      "children": [
        "card"
      ]
    }
  ]
}