{
  "name": "key-value-detail-list",
  "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>Details</text-ui>\n      </header>\n      <section>\n        <description-list-ui align=\"between\">\n          <dt>Status</dt><dd><badge-ui text=\"Published\" variant=\"success\" size=\"sm\"></badge-ui></dd>\n          <dt>Owner</dt><dd>Diana Singh</dd>\n          <dt>Created</dt><dd>Mar 12, 2026</dd>\n          <dt>Last updated</dt><dd>2 hours ago</dd>\n          <dt>ID</dt><dd><text-ui color=\"subtle\">doc_8f4a2c91</text-ui></dd>\n        </description-list-ui>\n      </section>\n    </card-ui>\n  </section>",
  "source": "catalog/ui-patterns/v050-content-blocks/v050-content-blocks.contents.html",
  "metadata": {
    "domain": "display",
    "description": "Key-value detail list — a card wrapping a description list of label / value pairs (status, owner, created, last updated, ID) with the value right-aligned against the label. The 'details / metadata / properties' panel for an entity-detail or inspector view.",
    "keywords": [
      "key",
      "value",
      "detail",
      "list",
      "description",
      "list",
      "metadata",
      "properties",
      "facts",
      "fields",
      "attributes",
      "status",
      "owner",
      "created",
      "updated",
      "id",
      "label",
      "value",
      "pairs",
      "entity",
      "detail",
      "inspector",
      "summary",
      "panel",
      "dl",
      "dt",
      "dd",
      "specs",
      "information",
      "record",
      "fields",
      "about"
    ]
  },
  "captured_at": "2026-06-10T19:45:40.486Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "strong": true,
      "textContent": "Details"
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "text"
      ]
    },
    {
      "id": "text-2",
      "component": "Text",
      "textContent": "Status",
      "variant": "body"
    },
    {
      "id": "badge",
      "component": "Badge",
      "size": "sm",
      "text": "Published",
      "variant": "success"
    },
    {
      "id": "text-3",
      "component": "Text",
      "textContent": "Owner",
      "variant": "body"
    },
    {
      "id": "text-4",
      "component": "Text",
      "textContent": "Diana Singh",
      "variant": "body"
    },
    {
      "id": "text-5",
      "component": "Text",
      "textContent": "Created",
      "variant": "body"
    },
    {
      "id": "text-6",
      "component": "Text",
      "textContent": "Mar 12, 2026",
      "variant": "body"
    },
    {
      "id": "text-7",
      "component": "Text",
      "textContent": "Last updated",
      "variant": "body"
    },
    {
      "id": "text-8",
      "component": "Text",
      "textContent": "2 hours ago",
      "variant": "body"
    },
    {
      "id": "text-9",
      "component": "Text",
      "textContent": "ID",
      "variant": "body"
    },
    {
      "id": "text-10",
      "component": "Text",
      "color": "subtle",
      "textContent": "doc_8f4a2c91"
    },
    {
      "id": "description-list",
      "component": "DescriptionList",
      "align": "between",
      "children": [
        "text-2",
        "badge",
        "text-3",
        "text-4",
        "text-5",
        "text-6",
        "text-7",
        "text-8",
        "text-9",
        "text-10"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column-11"
      ]
    },
    {
      "id": "column-11",
      "component": "Column",
      "children": [
        "description-list"
      ]
    },
    {
      "id": "card",
      "component": "Card",
      "children": [
        "header",
        "section"
      ]
    },
    {
      "id": "root",
      "component": "Section",
      "children": [
        "card"
      ]
    }
  ]
}