{
  "name": "responsive-row-pattern",
  "kind": "block",
  "primary": "div",
  "page": "/site/patterns/responsive.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<div>\n  <h3>Responsive row — toolbar</h3>\n  <p>Stack vertically on mobile, push label and actions to opposite ends on desktop.</p>\n  <code-ui language=\"html\">&lt;row-ui\n  gap=\"2 3@md\"\n  justify=\"start between@md\"\n  align=\"start center@md\"\n  wrap\n&gt;\n  &lt;text-ui strong&gt;Recent transactions&lt;/text-ui&gt;\n  &lt;row-ui gap=\"2\"&gt;\n    &lt;button-ui text=\"Export\" variant=\"outline\"&gt;&lt;/button-ui&gt;\n    &lt;button-ui text=\"+ New\" variant=\"primary\"&gt;&lt;/button-ui&gt;\n  &lt;/row-ui&gt;\n&lt;/row-ui&gt;</code-ui>\n  </div>",
  "source": "site/pages/patterns/responsive.html",
  "metadata": {
    "domain": "layout",
    "description": "Responsive row toolbar — gap and justify change at breakpoints; left label + right actions spread at md+ with @bp notation.",
    "keywords": [
      "responsive",
      "row",
      "toolbar",
      "gap",
      "justify",
      "breakpoint",
      "@bp",
      "spread",
      "layout",
      "mobile"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "variant": "heading",
      "textContent": "Responsive row — toolbar"
    },
    {
      "id": "text-2",
      "component": "Text",
      "variant": "body",
      "textContent": "Stack vertically on mobile, push label and actions to opposite ends on desktop."
    },
    {
      "id": "code",
      "component": "Code",
      "language": "html",
      "textContent": "&lt;row-ui gap=\"2 3@md\" justify=\"start between@md\" align=\"start center@md\" wrap &gt; &lt;text-ui strong&gt;Recent transactions&lt;/text-ui&gt; &lt;row-ui gap=\"2\"&gt; &lt;button-ui text=\"Export\" variant=\"outline\"&gt;&lt;/button-ui&gt; &lt;button-ui text=\"+ New\" variant=\"primary\"&gt;&lt;/button-ui&gt; &lt;/row-ui&gt; &lt;/row-ui&gt;"
    },
    {
      "id": "column",
      "component": "Column",
      "children": [
        "text",
        "text-2",
        "code"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column"
      ]
    },
    {
      "id": "root",
      "component": "Card",
      "children": [
        "section"
      ]
    }
  ]
}