{
  "name": "ds-list",
  "description": "List component with styling options",
  "docUrl": "https://design.soracom.io/design-system/elements/list/",
  "category": "elements",
  "htmlElements": [
    "ul",
    "ol"
  ],
  "isWebComponent": false,
  "modifiers": {
    "variant": [
      "--lined",
      "--numbered",
      "--section"
    ],
    "icon": "all",
    "indent": "all",
    "gap": "all"
  },
  "examples": [
    {
      "name": "basic",
      "html": "<ul class=\"ds-list\"><li>List item 1</li><li>List item 2</li><li>List item 3</li></ul>"
    },
    {
      "name": "numbered",
      "html": "<ol class=\"ds-list --numbered\"><li>First item</li><li>Second item</li><li>Third item</li></ol>"
    },
    {
      "name": "lined",
      "html": "<ul class=\"ds-list --lined\"><li>Lined item 1</li><li>Lined item 2</li><li>Lined item 3</li></ul>"
    },
    {
      "name": "with-icon",
      "html": "<ul class=\"ds-list --icon --icon-check\"><li>Item with icon</li><li>Another item</li></ul>"
    },
    {
      "name": "item-icons",
      "html": "<ul class=\"ds-list\"><li class=\"--icon --icon-check\">Check item</li><li class=\"--icon --icon-star\">Star item</li><li class=\"--icon --icon-info\">Info item</li></ul>"
    },
    {
      "name": "section-divider",
      "html": "<ul class=\"ds-list --lined\"><li>Group 1 - Item 1</li><li>Group 1 - Item 2</li><li class=\"--section\">Group 2 - Item 1</li><li>Group 2 - Item 2</li></ul>"
    }
  ]
}