{
  "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": {
      "support": "custom",
      "values": [
        "--small",
        "--limit"
      ]
    },
    "width": {
      "support": "custom",
      "values": [
        "--width-narrow",
        "--width-default",
        "--width-medium",
        "--width-wide"
      ]
    },
    "layout": {
      "support": "custom",
      "values": [
        "--center",
        "--middle",
        "--baseline",
        "--top",
        "--bottom",
        "--end",
        "--spaced",
        "--distributed",
        "--reverse",
        "--stretch",
        "--nowrap",
        "--no-wrap",
        "--uniform",
        "--connected",
        "--responsive-md",
        "--responsive-sm"
      ]
    },
    "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-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>"
    }
  ]
}