{
  "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": {
      "support": "custom",
      "values": [
        "--middle",
        "--center",
        "--grow",
        "--limit"
      ]
    },
    "state": {
      "support": "subset",
      "values": [
        "--loading"
      ]
    },
    "gap": {
      "support": "all"
    },
    "indent": {
      "support": "all"
    },
    "utility": {
      "support": "custom",
      "values": [
        "--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>"
    }
  ]
}