{
  "name": "responsive-grid-pattern",
  "kind": "block",
  "primary": "div",
  "page": "/site/patterns/responsive.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<div>\n  <h3>Responsive grid — KPI strip</h3>\n  <p>4-up on desktop, 2-up on tablet, single-column on mobile.</p>\n  <code-ui language=\"html\">&lt;grid-ui columns=\"1 2@sm 4@lg\" gap=\"3 4@md\"&gt;\n  &lt;card-ui&gt;...&lt;/card-ui&gt;\n  &lt;card-ui&gt;...&lt;/card-ui&gt;\n  &lt;card-ui&gt;...&lt;/card-ui&gt;\n  &lt;card-ui&gt;...&lt;/card-ui&gt;\n&lt;/grid-ui&gt;</code-ui>\n  </div>",
  "source": "site/pages/patterns/responsive.html",
  "metadata": {
    "domain": "layout",
    "description": "Responsive grid KPI strip — 1 column mobile, 2 tablet, 4 desktop using @bp notation: columns='1 2@sm 4@lg'.",
    "keywords": [
      "responsive",
      "grid",
      "columns",
      "breakpoint",
      "mobile",
      "tablet",
      "desktop",
      "@bp",
      "kpi",
      "layout"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "variant": "heading",
      "textContent": "Responsive grid — KPI strip"
    },
    {
      "id": "text-2",
      "component": "Text",
      "variant": "body",
      "textContent": "4-up on desktop, 2-up on tablet, single-column on mobile."
    },
    {
      "id": "code",
      "component": "Code",
      "language": "html",
      "textContent": "&lt;grid-ui columns=\"1 2@sm 4@lg\" gap=\"3 4@md\"&gt; &lt;card-ui&gt;...&lt;/card-ui&gt; &lt;card-ui&gt;...&lt;/card-ui&gt; &lt;card-ui&gt;...&lt;/card-ui&gt; &lt;card-ui&gt;...&lt;/card-ui&gt; &lt;/grid-ui&gt;"
    },
    {
      "id": "column",
      "component": "Column",
      "children": [
        "text",
        "text-2",
        "code"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column"
      ]
    },
    {
      "id": "root",
      "component": "Card",
      "children": [
        "section"
      ]
    }
  ]
}