{
  "name": "comparison-table",
  "kind": "block",
  "primary": "section",
  "page": "/catalog/ui-patterns/v050-marketing-blocks/v050-marketing-blocks.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<section>\n    <col-ui gap=\"4\">\n      <header align=\"center\">\n        <h2>Compare plans</h2>\n      </header>\n      <div style=\"overflow-x: auto; -webkit-overflow-scrolling: touch\">\n      <grid-ui columns=\"4\" gap=\"0\" style=\"min-width: 28rem\">\n        <text-ui strong>Feature</text-ui>\n        <text-ui strong text-align=\"center\">Free</text-ui>\n        <text-ui strong text-align=\"center\">Pro</text-ui>\n        <text-ui strong text-align=\"center\">Enterprise</text-ui>\n\n        <text-ui>Component library</text-ui>\n        <text-ui text-align=\"center\" color=\"success\">✓</text-ui>\n        <text-ui text-align=\"center\" color=\"success\">✓</text-ui>\n        <text-ui text-align=\"center\" color=\"success\">✓</text-ui>\n\n        <text-ui>Free-form composer</text-ui>\n        <text-ui text-align=\"center\" color=\"subtle\">—</text-ui>\n        <text-ui text-align=\"center\" color=\"success\">✓</text-ui>\n        <text-ui text-align=\"center\" color=\"success\">✓</text-ui>\n\n        <text-ui>Custom chunk corpus</text-ui>\n        <text-ui text-align=\"center\" color=\"subtle\">—</text-ui>\n        <text-ui text-align=\"center\" color=\"subtle\">—</text-ui>\n        <text-ui text-align=\"center\" color=\"success\">✓</text-ui>\n\n        <text-ui>SSO + audit log</text-ui>\n        <text-ui text-align=\"center\" color=\"subtle\">—</text-ui>\n        <text-ui text-align=\"center\" color=\"subtle\">—</text-ui>\n        <text-ui text-align=\"center\" color=\"success\">✓</text-ui>\n\n        <text-ui>Priority support</text-ui>\n        <text-ui text-align=\"center\" color=\"subtle\">—</text-ui>\n        <text-ui text-align=\"center\" color=\"success\">✓</text-ui>\n        <text-ui text-align=\"center\" color=\"success\">✓</text-ui>\n      </grid-ui>\n      </div>\n    </col-ui>\n  </section>",
  "source": "catalog/ui-patterns/v050-marketing-blocks/v050-marketing-blocks.contents.html",
  "metadata": {
    "domain": "layout",
    "description": "Feature comparison table — 2-3 columns of plans with feature row + checkmark/dash cells.",
    "keywords": [
      "comparison",
      "table",
      "features",
      "checkmarks",
      "compare",
      "feature-matrix",
      "side-by-side",
      "grid-comparison"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "variant": "title",
      "textContent": "Compare plans"
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "text"
      ]
    },
    {
      "id": "text-2",
      "component": "Text",
      "strong": true,
      "textContent": "Feature"
    },
    {
      "id": "text-3",
      "component": "Text",
      "strong": true,
      "text-align": "center",
      "textContent": "Free"
    },
    {
      "id": "text-4",
      "component": "Text",
      "strong": true,
      "text-align": "center",
      "textContent": "Pro"
    },
    {
      "id": "text-5",
      "component": "Text",
      "strong": true,
      "text-align": "center",
      "textContent": "Enterprise"
    },
    {
      "id": "text-6",
      "component": "Text",
      "textContent": "Component library"
    },
    {
      "id": "text-7",
      "component": "Text",
      "color": "success",
      "text-align": "center",
      "textContent": "✓"
    },
    {
      "id": "text-8",
      "component": "Text",
      "color": "success",
      "text-align": "center",
      "textContent": "✓"
    },
    {
      "id": "text-9",
      "component": "Text",
      "color": "success",
      "text-align": "center",
      "textContent": "✓"
    },
    {
      "id": "text-10",
      "component": "Text",
      "textContent": "Free-form composer"
    },
    {
      "id": "text-11",
      "component": "Text",
      "color": "subtle",
      "text-align": "center",
      "textContent": "—"
    },
    {
      "id": "text-12",
      "component": "Text",
      "color": "success",
      "text-align": "center",
      "textContent": "✓"
    },
    {
      "id": "text-13",
      "component": "Text",
      "color": "success",
      "text-align": "center",
      "textContent": "✓"
    },
    {
      "id": "text-14",
      "component": "Text",
      "textContent": "Custom chunk corpus"
    },
    {
      "id": "text-15",
      "component": "Text",
      "color": "subtle",
      "text-align": "center",
      "textContent": "—"
    },
    {
      "id": "text-16",
      "component": "Text",
      "color": "subtle",
      "text-align": "center",
      "textContent": "—"
    },
    {
      "id": "text-17",
      "component": "Text",
      "color": "success",
      "text-align": "center",
      "textContent": "✓"
    },
    {
      "id": "text-18",
      "component": "Text",
      "textContent": "SSO + audit log"
    },
    {
      "id": "text-19",
      "component": "Text",
      "color": "subtle",
      "text-align": "center",
      "textContent": "—"
    },
    {
      "id": "text-20",
      "component": "Text",
      "color": "subtle",
      "text-align": "center",
      "textContent": "—"
    },
    {
      "id": "text-21",
      "component": "Text",
      "color": "success",
      "text-align": "center",
      "textContent": "✓"
    },
    {
      "id": "text-22",
      "component": "Text",
      "textContent": "Priority support"
    },
    {
      "id": "text-23",
      "component": "Text",
      "color": "subtle",
      "text-align": "center",
      "textContent": "—"
    },
    {
      "id": "text-24",
      "component": "Text",
      "color": "success",
      "text-align": "center",
      "textContent": "✓"
    },
    {
      "id": "text-25",
      "component": "Text",
      "color": "success",
      "text-align": "center",
      "textContent": "✓"
    },
    {
      "id": "grid",
      "component": "Grid",
      "columns": "4",
      "gap": "0",
      "children": [
        "text-2",
        "text-3",
        "text-4",
        "text-5",
        "text-6",
        "text-7",
        "text-8",
        "text-9",
        "text-10",
        "text-11",
        "text-12",
        "text-13",
        "text-14",
        "text-15",
        "text-16",
        "text-17",
        "text-18",
        "text-19",
        "text-20",
        "text-21",
        "text-22",
        "text-23",
        "text-24",
        "text-25"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "gap": "4",
      "children": [
        "header",
        "grid"
      ]
    },
    {
      "id": "root",
      "component": "Section",
      "children": [
        "column"
      ]
    }
  ]
}