{
  "name": "contact-form-card",
  "kind": "block",
  "primary": "card-ui",
  "page": "/catalog/ui-patterns/v050-form-blocks/v050-form-blocks.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<card-ui>\n    <header>\n      <h3>Get in touch</h3>\n      <p slot=\"description\">Tell us what you need and we'll reply within one business day.</p>\n    </header>\n    <section>\n      <col-ui gap=\"4\">\n        <grid-ui columns=\"1 2@sm\" gap=\"3\">\n          <field-ui label=\"Name\">\n            <input-ui name=\"name\" autocomplete=\"name\" placeholder=\"Jane Doe\" required></input-ui>\n          </field-ui>\n          <field-ui label=\"Email\">\n            <input-ui type=\"email\" name=\"email\" autocomplete=\"email\" placeholder=\"jane@acme.com\" required></input-ui>\n          </field-ui>\n        </grid-ui>\n        <field-ui label=\"Subject\">\n          <input-ui name=\"subject\" placeholder=\"How can we help?\" required></input-ui>\n        </field-ui>\n        <field-ui label=\"Message\" hint=\"The more detail you give, the faster we can help.\">\n          <textarea-ui name=\"message\" rows=\"4\" placeholder=\"Tell us more…\" required></textarea-ui>\n        </field-ui>\n      </col-ui>\n    </section>\n    <footer>\n      <row-ui gap=\"3\" justify=\"flex-end\">\n        <button-ui text=\"Clear\" variant=\"outline\" type=\"reset\"></button-ui>\n        <button-ui text=\"Send message\" variant=\"primary\" type=\"submit\" icon=\"paper-plane-tilt\"></button-ui>\n      </row-ui>\n    </footer>\n  </card-ui>",
  "source": "catalog/ui-patterns/v050-form-blocks/v050-form-blocks.contents.html",
  "metadata": {
    "domain": "forms",
    "description": "Canonical full contact form card with both submit and reset actions — heading and subheading, name and email fields in a responsive two-column grid, a subject field, a message textarea, and a footer with a Send message primary button and a Clear (reset) secondary button. The complete form composition (header + fields + dual-action footer). Use for 'contact form', 'contact us form', 'form with submit and reset', 'message form'.",
    "keywords": [
      "contact",
      "form",
      "contact-us",
      "message",
      "name",
      "email",
      "subject",
      "textarea",
      "send",
      "submit",
      "reset",
      "clear",
      "two-column",
      "grid",
      "field",
      "input",
      "label",
      "complete",
      "card",
      "heading",
      "footer",
      "dual-action",
      "full-form"
    ]
  },
  "captured_at": "2026-06-10T14:28:57.979Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "variant": "heading",
      "textContent": "Get in touch"
    },
    {
      "id": "text-2",
      "component": "Text",
      "variant": "body",
      "slot": "description",
      "textContent": "Tell us what you need and we'll reply within one business day."
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "text",
        "text-2"
      ]
    },
    {
      "id": "name",
      "component": "Input",
      "required": true,
      "autocomplete": "name",
      "name": "name",
      "placeholder": "Jane Doe"
    },
    {
      "id": "field",
      "component": "Field",
      "label": "Name",
      "children": [
        "name"
      ]
    },
    {
      "id": "email",
      "component": "Input",
      "type": "email",
      "required": true,
      "autocomplete": "email",
      "name": "email",
      "placeholder": "jane@acme.com"
    },
    {
      "id": "field-2",
      "component": "Field",
      "label": "Email",
      "children": [
        "email"
      ]
    },
    {
      "id": "grid",
      "component": "Grid",
      "columns": "1 2@sm",
      "gap": "3",
      "children": [
        "field",
        "field-2"
      ]
    },
    {
      "id": "subject",
      "component": "Input",
      "required": true,
      "name": "subject",
      "placeholder": "How can we help?"
    },
    {
      "id": "field-3",
      "component": "Field",
      "label": "Subject",
      "children": [
        "subject"
      ]
    },
    {
      "id": "message",
      "component": "TextArea",
      "required": true,
      "name": "message",
      "placeholder": "Tell us more…",
      "rows": "4"
    },
    {
      "id": "field-4",
      "component": "Field",
      "hint": "The more detail you give, the faster we can help.",
      "label": "Message",
      "children": [
        "message"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "gap": "4",
      "children": [
        "grid",
        "field-3",
        "field-4"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column"
      ]
    },
    {
      "id": "button",
      "component": "Button",
      "type": "reset",
      "text": "Clear",
      "variant": "outline"
    },
    {
      "id": "button-2",
      "component": "Button",
      "type": "submit",
      "icon": "paper-plane-tilt",
      "text": "Send message",
      "variant": "primary"
    },
    {
      "id": "row",
      "component": "Row",
      "gap": "3",
      "justify": "flex-end",
      "children": [
        "button",
        "button-2"
      ]
    },
    {
      "id": "footer",
      "component": "Footer",
      "children": [
        "row"
      ]
    },
    {
      "id": "root",
      "component": "Card",
      "children": [
        "header",
        "section",
        "footer"
      ]
    }
  ]
}