{
  "name": "ds-details",
  "description": "Label/value pair display component using dl or table",
  "docUrl": "https://design.soracom.io/design-system/elements/details/",
  "category": "elements",
  "htmlElements": [
    "div",
    "table",
    "dl"
  ],
  "isWebComponent": false,
  "modifiers": {
    "color": "all",
    "visual-state": [
      "--alert",
      "--warning",
      "--success",
      "--info"
    ],
    "variant": [
      "--simple",
      "--plain"
    ],
    "layout": [
      "--vertical"
    ],
    "size": [
      "--wide"
    ],
    "state": [
      "--loading"
    ],
    "indent": "all"
  },
  "structure": {
    "requiredChildren": [
      "dl"
    ]
  },
  "examples": [
    {
      "name": "basic-dl",
      "html": "<div class=\"ds-details\"><dl><dt>Label</dt><dd><div>Value</div></dd><dt>Another Label</dt><dd><div>Another Value</div></dd></dl></div>"
    },
    {
      "name": "basic-table",
      "html": "<table class=\"ds-details\"><tr><th>Label</th><td><div>Value</div></td></tr><tr><th>Another Label</th><td><div>Another Value</div></td></tr></table>"
    },
    {
      "name": "vertical",
      "html": "<div class=\"ds-details --vertical\"><dl><dt>Label</dt><dd><div>Value</div></dd><dt>Another Label</dt><dd><div>Another Value</div></dd></dl></div>"
    },
    {
      "name": "simple",
      "html": "<table class=\"ds-details --simple\"><tr><th>Label</th><td>Value</td></tr><tr><th>Another Label</th><td>Another Value</td></tr></table>"
    },
    {
      "name": "plain",
      "html": "<div class=\"ds-details --plain\"><dl><dt>Label</dt><dd><div>Value</div></dd><dt>Another Label</dt><dd><div>Another Value</div></dd></dl></div>"
    },
    {
      "name": "wide",
      "html": "<div class=\"ds-details --wide\"><dl><dt>Label</dt><dd><div>Value</div></dd><dt>Another Label</dt><dd><div>Another Value</div></dd></dl></div>"
    },
    {
      "name": "alert",
      "html": "<div class=\"ds-details --alert\"><dl><dt>Label</dt><dd><div>Value</div></dd></dl></div>"
    },
    {
      "name": "with-footer",
      "html": "<table class=\"ds-details\"><tr><th>Label</th><td><div>Value</div></td></tr><tfoot><tr><td colspan=\"999\"><button class=\"ds-button --plain\"><span>Add row</span></button></td></tr></tfoot></table>"
    }
  ]
}