{
  "name": "ds-rows",
  "description": "Row-based layout container",
  "docUrl": "https://design.soracom.io/design-system/containers/rows/",
  "category": "containers",
  "htmlElements": [
    "div"
  ],
  "isWebComponent": false,
  "modifiers": {
    "layout": [
      "--middle",
      "--center",
      "--grow",
      "--limit"
    ],
    "state": [
      "--loading"
    ],
    "gap": "all",
    "indent": "all",
    "special": [
      "--1",
      "--2",
      "--3",
      "--4",
      "--5",
      "--6",
      "--7",
      "--8",
      "--9",
      "--10",
      "--11",
      "--12"
    ]
  },
  "examples": [
    {
      "name": "basic",
      "html": "<div class=\"ds-rows\"><div>Row 1</div><div>Row 2</div><div>Row 3</div></div>"
    },
    {
      "name": "centered",
      "html": "<div class=\"ds-rows --center --middle\"><div>Centered vertically and horizontally</div></div>"
    },
    {
      "name": "limit",
      "html": "<div class=\"ds-rows --limit\"><div>Max-width 1200px centered content</div></div>"
    },
    {
      "name": "indented",
      "html": "<div class=\"ds-rows --indent-large\"><div>Row with large indent</div><div>Another row</div></div>"
    },
    {
      "name": "grow",
      "html": "<div class=\"ds-rows --grow\"><div>Takes full height of parent</div></div>"
    }
  ]
}