{
  "name": "accordion-settings",
  "kind": "block",
  "primary": "section",
  "page": "/catalog/ui-patterns/v050-mode-c-blocks/v050-mode-c-blocks.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<section>\n    <col-ui gap=\"2\">\n      <card-ui>\n        <header>\n          <row-ui gap=\"2\" align=\"center\">\n            <icon-ui name=\"user\"></icon-ui>\n            <text-ui strong>Profile</text-ui>\n            <icon-ui name=\"caret-down\" color=\"subtle\"></icon-ui>\n          </row-ui>\n        </header>\n        <section>\n          <col-ui gap=\"3\">\n            <field-ui label=\"Display name\"><input-ui value=\"Jane Smith\"></input-ui></field-ui>\n            <field-ui label=\"Email\"><input-ui type=\"email\" value=\"jane@acme.com\"></input-ui></field-ui>\n          </col-ui>\n        </section>\n      </card-ui>\n      <card-ui>\n        <header>\n          <row-ui gap=\"2\" align=\"center\">\n            <icon-ui name=\"bell\"></icon-ui>\n            <text-ui strong>Notifications</text-ui>\n            <icon-ui name=\"caret-right\" color=\"subtle\"></icon-ui>\n          </row-ui>\n        </header>\n      </card-ui>\n      <card-ui>\n        <header>\n          <row-ui gap=\"2\" align=\"center\">\n            <icon-ui name=\"lock\"></icon-ui>\n            <text-ui strong>Privacy</text-ui>\n            <icon-ui name=\"caret-right\" color=\"subtle\"></icon-ui>\n          </row-ui>\n        </header>\n      </card-ui>\n      <card-ui>\n        <header>\n          <row-ui gap=\"2\" align=\"center\">\n            <icon-ui name=\"gear\"></icon-ui>\n            <text-ui strong>Advanced</text-ui>\n            <icon-ui name=\"caret-right\" color=\"subtle\"></icon-ui>\n          </row-ui>\n        </header>\n      </card-ui>\n    </col-ui>\n  </section>",
  "source": "catalog/ui-patterns/v050-mode-c-blocks/v050-mode-c-blocks.contents.html",
  "metadata": {
    "domain": "layout",
    "description": "Settings panel organized as accordion — expandable sections (profile / notifications / privacy / advanced) each containing form controls.",
    "keywords": [
      "accordion",
      "settings",
      "collapsible",
      "expandable",
      "sections",
      "preferences",
      "profile",
      "notifications",
      "privacy"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "user",
      "component": "Icon",
      "name": "user"
    },
    {
      "id": "text",
      "component": "Text",
      "strong": true,
      "textContent": "Profile"
    },
    {
      "id": "caret-down",
      "component": "Icon",
      "name": "caret-down"
    },
    {
      "id": "row",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "user",
        "text",
        "caret-down"
      ]
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "row"
      ]
    },
    {
      "id": "input",
      "component": "Input",
      "value": "Jane Smith"
    },
    {
      "id": "field",
      "component": "Field",
      "label": "Display name",
      "children": [
        "input"
      ]
    },
    {
      "id": "input-2",
      "component": "Input",
      "type": "email",
      "value": "jane@acme.com"
    },
    {
      "id": "field-2",
      "component": "Field",
      "label": "Email",
      "children": [
        "input-2"
      ]
    },
    {
      "id": "column-2",
      "component": "Column",
      "gap": "3",
      "children": [
        "field",
        "field-2"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column-2"
      ]
    },
    {
      "id": "card",
      "component": "Card",
      "children": [
        "header",
        "section"
      ]
    },
    {
      "id": "bell",
      "component": "Icon",
      "name": "bell"
    },
    {
      "id": "text-2",
      "component": "Text",
      "strong": true,
      "textContent": "Notifications"
    },
    {
      "id": "caret-right",
      "component": "Icon",
      "name": "caret-right"
    },
    {
      "id": "row-2",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "bell",
        "text-2",
        "caret-right"
      ]
    },
    {
      "id": "header-2",
      "component": "Header",
      "children": [
        "row-2"
      ]
    },
    {
      "id": "card-2",
      "component": "Card",
      "children": [
        "header-2"
      ]
    },
    {
      "id": "lock",
      "component": "Icon",
      "name": "lock"
    },
    {
      "id": "text-3",
      "component": "Text",
      "strong": true,
      "textContent": "Privacy"
    },
    {
      "id": "icon",
      "component": "Icon",
      "name": "caret-right"
    },
    {
      "id": "row-3",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "lock",
        "text-3",
        "icon"
      ]
    },
    {
      "id": "header-3",
      "component": "Header",
      "children": [
        "row-3"
      ]
    },
    {
      "id": "card-3",
      "component": "Card",
      "children": [
        "header-3"
      ]
    },
    {
      "id": "gear",
      "component": "Icon",
      "name": "gear"
    },
    {
      "id": "text-4",
      "component": "Text",
      "strong": true,
      "textContent": "Advanced"
    },
    {
      "id": "icon-2",
      "component": "Icon",
      "name": "caret-right"
    },
    {
      "id": "row-4",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "gear",
        "text-4",
        "icon-2"
      ]
    },
    {
      "id": "header-4",
      "component": "Header",
      "children": [
        "row-4"
      ]
    },
    {
      "id": "card-4",
      "component": "Card",
      "children": [
        "header-4"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "gap": "2",
      "children": [
        "card",
        "card-2",
        "card-3",
        "card-4"
      ]
    },
    {
      "id": "root",
      "component": "Section",
      "children": [
        "column"
      ]
    }
  ]
}