{
  "name": "drawer-record-detail",
  "kind": "block",
  "primary": "div",
  "page": "/packages/web-components/components/drawer/drawer.examples.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "data-artifact-item": "",
    "data-artifact-label": "record detail drawer"
  },
  "html": "<button-ui text=\"View record\" icon=\"user\" variant=\"outline\" onclick=\"this.nextElementSibling.open=true\"></button-ui>\n      <drawer-ui side=\"right\" size=\"sm\" text=\"Maya Chen\">\n        <section slot=\"body\">\n          <col-ui gap=\"4\">\n            <description-list-ui>\n              <dt>Email</dt><dd>maya@example.com</dd>\n              <dt>Role</dt><dd>Designer</dd>\n              <dt>Status</dt><dd><tag-ui size=\"sm\" variant=\"success\">Active</tag-ui></dd>\n              <dt>Joined</dt><dd>March 12, 2026</dd>\n              <dt>Last active</dt><dd>Today</dd>\n            </description-list-ui>\n          </col-ui>\n        </section>\n        <footer slot=\"footer\">\n          <row-ui gap=\"2\">\n            <button-ui text=\"Edit\" variant=\"outline\" stretch></button-ui>\n            <button-ui text=\"Remove\" variant=\"ghost\" color=\"danger\" stretch></button-ui>\n          </row-ui>\n        </footer>\n      </drawer-ui>",
  "source": "packages/web-components/components/drawer/drawer.examples.html",
  "metadata": {
    "domain": "data",
    "description": "Record detail drawer — read-only view of a record's fields in a right-side drawer. Common for list rows that reveal detail on click.",
    "keywords": [
      "drawer",
      "detail",
      "record",
      "view",
      "inspect",
      "side",
      "panel",
      "fields",
      "label",
      "value",
      "read-only",
      "table",
      "list",
      "row",
      "click"
    ]
  },
  "captured_at": "2026-06-10T20:25:14.783Z",
  "template": [
    {
      "id": "root",
      "component": "Text",
      "textContent": "Email maya@example.com Role Designer Status Active Joined March 12, 2026 Last active Today",
      "variant": "body"
    }
  ]
}