{
  "name": "ds-cols",
  "description": "Column-based layout container",
  "docUrl": "https://design.soracom.io/design-system/containers/cols/",
  "category": "containers",
  "htmlElements": [
    "div"
  ],
  "isWebComponent": false,
  "modifiers": {
    "size": [
      "--small",
      "--limit"
    ],
    "width": [
      "--width-narrow",
      "--width-default",
      "--width-medium",
      "--width-wide"
    ],
    "layout": [
      "--center",
      "--middle",
      "--baseline",
      "--top",
      "--bottom",
      "--end",
      "--spaced",
      "--distributed",
      "--reverse",
      "--stretch",
      "--nowrap",
      "--no-wrap",
      "--uniform",
      "--connected",
      "--responsive-md",
      "--responsive-sm"
    ],
    "gap": "all",
    "indent": "all",
    "special": [
      "--1",
      "--2",
      "--3",
      "--4",
      "--5",
      "--6",
      "--7",
      "--8",
      "--9",
      "--10",
      "--11",
      "--12"
    ]
  },
  "examples": [
    {
      "name": "basic",
      "html": "<div class=\"ds-cols\"><div>Column 1</div><div>Column 2</div><div>Column 3</div></div>"
    },
    {
      "name": "centered",
      "html": "<div class=\"ds-cols --center --middle\"><div>Centered content</div><div>Centered content</div></div>"
    },
    {
      "name": "spaced",
      "html": "<div class=\"ds-cols --spaced\"><div>Left</div><div>Right</div></div>"
    },
    {
      "name": "uniform",
      "html": "<div class=\"ds-cols --uniform\"><div>Equal width</div><div>Equal width</div><div>Equal width</div></div>"
    },
    {
      "name": "responsive",
      "html": "<div class=\"ds-cols --responsive-md\"><div>Column 1</div><div>Column 2</div></div>"
    },
    {
      "name": "limit",
      "html": "<div class=\"ds-cols --limit\"><div>Max-width 1200px content</div><div>Centered</div></div>"
    }
  ]
}