{
  "name": "feature-grid-three-cards",
  "kind": "block",
  "primary": "grid-ui",
  "page": "/catalog/page-shells/app/marketing-page/marketing-page.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "columns": "1 3@md",
    "gap": "4"
  },
  "html": "<grid-ui columns=\"1 3@md\" gap=\"4\">\n      <card-ui>\n        <header><h3>94+ Primitives</h3></header>\n        <section><text-ui color=\"subtle\">Battle-tested components for every surface</text-ui></section>\n      </card-ui>\n      <card-ui>\n        <header><h3>Gen-UI Pipeline</h3></header>\n        <section><text-ui color=\"subtle\">Generate UIs from natural language</text-ui></section>\n      </card-ui>\n      <card-ui>\n        <header><h3>A2UI Runtime</h3></header>\n        <section><text-ui color=\"subtle\">Agent-to-UI JSON with live rendering</text-ui></section>\n      </card-ui>\n    </grid-ui>",
  "source": "catalog/page-shells/app/marketing-page/marketing-page.contents.html",
  "metadata": {
    "domain": "marketing",
    "description": "Three-card feature grid — a responsive 1-up / 3-up grid of plain feature cards, each a bold heading over a one-line subtitle, no icons. The marketing 'three key features / benefits / highlights' row that sits below a landing hero.",
    "keywords": [
      "feature",
      "grid",
      "three",
      "cards",
      "columns",
      "marketing",
      "landing",
      "features",
      "benefits",
      "highlights",
      "value",
      "props",
      "selling",
      "points",
      "card",
      "heading",
      "subtitle",
      "product",
      "capabilities",
      "responsive",
      "3-up",
      "grid",
      "showcase",
      "what",
      "you",
      "get",
      "features",
      "section",
      "no",
      "icons"
    ]
  },
  "captured_at": "2026-06-10T19:45:40.486Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "variant": "heading",
      "textContent": "94+ Primitives"
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "text"
      ]
    },
    {
      "id": "text-2",
      "component": "Text",
      "color": "subtle",
      "textContent": "Battle-tested components for every surface"
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "children": [
        "text-2"
      ]
    },
    {
      "id": "card",
      "component": "Card",
      "children": [
        "header",
        "section"
      ]
    },
    {
      "id": "text-3",
      "component": "Text",
      "variant": "heading",
      "textContent": "Gen-UI Pipeline"
    },
    {
      "id": "header-2",
      "component": "Header",
      "children": [
        "text-3"
      ]
    },
    {
      "id": "text-4",
      "component": "Text",
      "color": "subtle",
      "textContent": "Generate UIs from natural language"
    },
    {
      "id": "section-2",
      "component": "Section",
      "children": [
        "column-2"
      ]
    },
    {
      "id": "column-2",
      "component": "Column",
      "children": [
        "text-4"
      ]
    },
    {
      "id": "card-2",
      "component": "Card",
      "children": [
        "header-2",
        "section-2"
      ]
    },
    {
      "id": "text-5",
      "component": "Text",
      "variant": "heading",
      "textContent": "A2UI Runtime"
    },
    {
      "id": "header-3",
      "component": "Header",
      "children": [
        "text-5"
      ]
    },
    {
      "id": "text-6",
      "component": "Text",
      "color": "subtle",
      "textContent": "Agent-to-UI JSON with live rendering"
    },
    {
      "id": "section-3",
      "component": "Section",
      "children": [
        "column-3"
      ]
    },
    {
      "id": "column-3",
      "component": "Column",
      "children": [
        "text-6"
      ]
    },
    {
      "id": "card-3",
      "component": "Card",
      "children": [
        "header-3",
        "section-3"
      ]
    },
    {
      "id": "root",
      "component": "Grid",
      "columns": "1 3@md",
      "gap": "4",
      "children": [
        "card",
        "card-2",
        "card-3"
      ]
    }
  ]
}