{
  "name": "feature-grid-icons",
  "kind": "block",
  "primary": "col-ui",
  "page": "/catalog/ui-patterns/app/feature-grid-icons/feature-grid-icons.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "gap": "5"
  },
  "html": "<col-ui gap=\"5\">\n  <col-ui align=\"center\" gap=\"1\">\n    <text-ui size=\"xl\" weight=\"semibold\">Everything you need to ship faster</text-ui>\n    <text-ui color=\"subtle\" text-align=\"center\">Batteries-included primitives, composable by design.</text-ui>\n  </col-ui>\n  <grid-ui columns=\"1 3@md\" gap=\"5\">\n    <col-ui gap=\"3\">\n      <icon-ui name=\"lightning\" size=\"32\" color=\"var(--a-accent-strong)\"></icon-ui>\n      <col-ui gap=\"1\">\n        <text-ui weight=\"semibold\">Blazing fast composition</text-ui>\n        <text-ui size=\"sm\" color=\"subtle\">Describe your screen in plain language and get production-ready markup in seconds.</text-ui>\n      </col-ui>\n    </col-ui>\n\n    <col-ui gap=\"3\">\n      <icon-ui name=\"lock\" size=\"32\" color=\"var(--a-accent-strong)\"></icon-ui>\n      <col-ui gap=\"1\">\n        <text-ui weight=\"semibold\">Accessibility built in</text-ui>\n        <text-ui size=\"sm\" color=\"subtle\">Every primitive ships with ARIA semantics, keyboard navigation, and focus management.</text-ui>\n      </col-ui>\n    </col-ui>\n\n    <col-ui gap=\"3\">\n      <icon-ui name=\"palette\" size=\"32\" color=\"var(--a-accent-strong)\"></icon-ui>\n      <col-ui gap=\"1\">\n        <text-ui weight=\"semibold\">Fully themeable</text-ui>\n        <text-ui size=\"sm\" color=\"subtle\">Token-driven design system with light/dark mode, density, and radius controls out of the box.</text-ui>\n      </col-ui>\n    </col-ui>\n\n    <col-ui gap=\"3\">\n      <icon-ui name=\"puzzle-piece\" size=\"32\" color=\"var(--a-accent-strong)\"></icon-ui>\n      <col-ui gap=\"1\">\n        <text-ui weight=\"semibold\">93+ primitives</text-ui>\n        <text-ui size=\"sm\" color=\"subtle\">From atoms to complex shells — cards, tables, modals, charts, and more in a single package.</text-ui>\n      </col-ui>\n    </col-ui>\n\n    <col-ui gap=\"3\">\n      <icon-ui name=\"code\" size=\"32\" color=\"var(--a-accent-strong)\"></icon-ui>\n      <col-ui gap=\"1\">\n        <text-ui weight=\"semibold\">Framework agnostic</text-ui>\n        <text-ui size=\"sm\" color=\"subtle\">Vanilla web components — works with React, Vue, Svelte, or plain HTML with no adapter needed.</text-ui>\n      </col-ui>\n    </col-ui>\n\n    <col-ui gap=\"3\">\n      <icon-ui name=\"arrow-clockwise\" size=\"32\" color=\"var(--a-accent-strong)\"></icon-ui>\n      <col-ui gap=\"1\">\n        <text-ui weight=\"semibold\">Light DOM first</text-ui>\n        <text-ui size=\"sm\" color=\"subtle\">Full CSS cascade, no shadow-DOM piercing hacks — style any element with your existing toolchain.</text-ui>\n      </col-ui>\n    </col-ui>\n  </grid-ui>\n</col-ui>",
  "source": "catalog/ui-patterns/app/feature-grid-icons/feature-grid-icons.contents.html",
  "metadata": {
    "domain": "content",
    "description": "Feature grid with 6 cells each containing an icon, bold title, and one-line description. Marketing feature showcase layout.",
    "keywords": [
      "feature",
      "grid",
      "icons",
      "icon-ui",
      "grid",
      "marketing",
      "features",
      "highlights",
      "benefits",
      "showcase",
      "6-cell",
      "feature-grid",
      "icon",
      "title",
      "description",
      "grid-ui",
      "landing"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "size": "xl",
      "weight": "semibold",
      "textContent": "Everything you need to ship faster"
    },
    {
      "id": "text-2",
      "component": "Text",
      "color": "subtle",
      "text-align": "center",
      "textContent": "Batteries-included primitives, composable by design."
    },
    {
      "id": "column",
      "component": "Column",
      "align": "center",
      "gap": "1",
      "children": [
        "text",
        "text-2"
      ]
    },
    {
      "id": "lightning",
      "component": "Icon",
      "name": "lightning",
      "size": "32"
    },
    {
      "id": "text-3",
      "component": "Text",
      "weight": "semibold",
      "textContent": "Blazing fast composition"
    },
    {
      "id": "text-4",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Describe your screen in plain language and get production-ready markup in seconds."
    },
    {
      "id": "column-3",
      "component": "Column",
      "gap": "1",
      "children": [
        "text-3",
        "text-4"
      ]
    },
    {
      "id": "column-2",
      "component": "Column",
      "gap": "3",
      "children": [
        "lightning",
        "column-3"
      ]
    },
    {
      "id": "lock",
      "component": "Icon",
      "name": "lock",
      "size": "32"
    },
    {
      "id": "text-5",
      "component": "Text",
      "weight": "semibold",
      "textContent": "Accessibility built in"
    },
    {
      "id": "text-6",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Every primitive ships with ARIA semantics, keyboard navigation, and focus management."
    },
    {
      "id": "column-5",
      "component": "Column",
      "gap": "1",
      "children": [
        "text-5",
        "text-6"
      ]
    },
    {
      "id": "column-4",
      "component": "Column",
      "gap": "3",
      "children": [
        "lock",
        "column-5"
      ]
    },
    {
      "id": "palette",
      "component": "Icon",
      "name": "palette",
      "size": "32"
    },
    {
      "id": "text-7",
      "component": "Text",
      "weight": "semibold",
      "textContent": "Fully themeable"
    },
    {
      "id": "text-8",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Token-driven design system with light/dark mode, density, and radius controls out of the box."
    },
    {
      "id": "column-7",
      "component": "Column",
      "gap": "1",
      "children": [
        "text-7",
        "text-8"
      ]
    },
    {
      "id": "column-6",
      "component": "Column",
      "gap": "3",
      "children": [
        "palette",
        "column-7"
      ]
    },
    {
      "id": "puzzle-piece",
      "component": "Icon",
      "name": "puzzle-piece",
      "size": "32"
    },
    {
      "id": "text-9",
      "component": "Text",
      "weight": "semibold",
      "textContent": "93+ primitives"
    },
    {
      "id": "text-10",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "From atoms to complex shells — cards, tables, modals, charts, and more in a single package."
    },
    {
      "id": "column-9",
      "component": "Column",
      "gap": "1",
      "children": [
        "text-9",
        "text-10"
      ]
    },
    {
      "id": "column-8",
      "component": "Column",
      "gap": "3",
      "children": [
        "puzzle-piece",
        "column-9"
      ]
    },
    {
      "id": "code",
      "component": "Icon",
      "name": "code",
      "size": "32"
    },
    {
      "id": "text-11",
      "component": "Text",
      "weight": "semibold",
      "textContent": "Framework agnostic"
    },
    {
      "id": "text-12",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Vanilla web components — works with React, Vue, Svelte, or plain HTML with no adapter needed."
    },
    {
      "id": "column-11",
      "component": "Column",
      "gap": "1",
      "children": [
        "text-11",
        "text-12"
      ]
    },
    {
      "id": "column-10",
      "component": "Column",
      "gap": "3",
      "children": [
        "code",
        "column-11"
      ]
    },
    {
      "id": "arrow-clockwise",
      "component": "Icon",
      "name": "arrow-clockwise",
      "size": "32"
    },
    {
      "id": "text-13",
      "component": "Text",
      "weight": "semibold",
      "textContent": "Light DOM first"
    },
    {
      "id": "text-14",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Full CSS cascade, no shadow-DOM piercing hacks — style any element with your existing toolchain."
    },
    {
      "id": "column-13",
      "component": "Column",
      "gap": "1",
      "children": [
        "text-13",
        "text-14"
      ]
    },
    {
      "id": "column-12",
      "component": "Column",
      "gap": "3",
      "children": [
        "arrow-clockwise",
        "column-13"
      ]
    },
    {
      "id": "grid",
      "component": "Grid",
      "columns": "1 3@md",
      "gap": "5",
      "children": [
        "column-2",
        "column-4",
        "column-6",
        "column-8",
        "column-10",
        "column-12"
      ]
    },
    {
      "id": "root",
      "component": "Column",
      "gap": "5",
      "children": [
        "column",
        "grid"
      ]
    }
  ]
}