{
  "name": "ds-controls",
  "description": "Control group container",
  "docUrl": "https://design.soracom.io/design-system/containers/controls/",
  "category": "containers",
  "htmlElements": [
    "section",
    "div"
  ],
  "isWebComponent": false,
  "modifiers": {
    "variant": [
      "--plain"
    ],
    "layout": [
      "--end",
      "--center",
      "--spaced",
      "--distributed",
      "--reverse"
    ],
    "indent": "all",
    "gap": "all"
  },
  "examples": [
    {
      "name": "basic",
      "html": "<section class=\"ds-controls\"><div><button class=\"ds-button --primary\"><span>Save</span></button><button class=\"ds-button --plain\"><span>Cancel</span></button></div></section>"
    },
    {
      "name": "plain",
      "html": "<section class=\"ds-controls --plain\"><div><button class=\"ds-button --primary\"><span>Save</span></button><button class=\"ds-button --plain\"><span>Cancel</span></button></div></section>"
    },
    {
      "name": "end",
      "html": "<section class=\"ds-controls --end\"><div><button class=\"ds-button --primary\"><span>Submit</span></button></div></section>"
    },
    {
      "name": "spaced",
      "html": "<section class=\"ds-controls --spaced\"><div><button class=\"ds-button --plain\"><span>Back</span></button></div><div><button class=\"ds-button --primary\"><span>Next</span></button></div></section>"
    }
  ]
}