{
  "name": "card-with-form",
  "kind": "block",
  "primary": "div",
  "page": "/packages/web-components/components/card/card.examples.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "data-artifact-item": "",
    "data-artifact-label": "card with form fields"
  },
  "html": "<card-ui style=\"max-width:400px\">\n        <header>\n          <h3>Edit profile</h3>\n        </header>\n        <section>\n          <col-ui gap=\"3\">\n            <field-ui label=\"Full name\">\n              <input-ui value=\"Maya Chen\" placeholder=\"Full name\"></input-ui>\n            </field-ui>\n            <field-ui label=\"Role\">\n              <select-ui value=\"designer\">\n                <option value=\"designer\">Designer</option>\n                <option value=\"engineer\">Engineer</option>\n                <option value=\"product\">Product</option>\n              </select-ui>\n            </field-ui>\n          </col-ui>\n        </section>\n        <footer>\n          <row-ui gap=\"2\" justify=\"end\">\n            <button-ui text=\"Cancel\" variant=\"ghost\"></button-ui>\n            <button-ui text=\"Save changes\" variant=\"primary\"></button-ui>\n          </row-ui>\n        </footer>\n      </card-ui>",
  "source": "packages/web-components/components/card/card.examples.html",
  "metadata": {
    "domain": "forms",
    "description": "Form card — card containing labeled form fields with a footer action row. Standard shape for settings forms and quick-edit surfaces.",
    "keywords": [
      "card",
      "form",
      "fields",
      "input",
      "select",
      "label",
      "footer",
      "actions",
      "save",
      "cancel",
      "settings",
      "quick-edit"
    ]
  },
  "captured_at": "2026-06-10T20:25:14.783Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "variant": "heading",
      "textContent": "Edit profile"
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "text"
      ]
    },
    {
      "id": "input",
      "component": "Input",
      "placeholder": "Full name",
      "value": "Maya Chen"
    },
    {
      "id": "field",
      "component": "Field",
      "label": "Full name",
      "children": [
        "input"
      ]
    },
    {
      "id": "choice-picker",
      "component": "ChoicePicker",
      "value": "designer",
      "options": [
        {
          "value": "designer",
          "label": "Designer"
        },
        {
          "value": "engineer",
          "label": "Engineer"
        },
        {
          "value": "product",
          "label": "Product"
        }
      ]
    },
    {
      "id": "field-2",
      "component": "Field",
      "label": "Role",
      "children": [
        "choice-picker"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "gap": "3",
      "children": [
        "field",
        "field-2"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column"
      ]
    },
    {
      "id": "button",
      "component": "Button",
      "text": "Cancel",
      "variant": "ghost"
    },
    {
      "id": "button-2",
      "component": "Button",
      "text": "Save changes",
      "variant": "primary"
    },
    {
      "id": "row",
      "component": "Row",
      "gap": "2",
      "justify": "end",
      "children": [
        "button",
        "button-2"
      ]
    },
    {
      "id": "footer",
      "component": "Footer",
      "children": [
        "row"
      ]
    },
    {
      "id": "root",
      "component": "Card",
      "children": [
        "header",
        "section",
        "footer"
      ]
    }
  ]
}