{
  "name": "ds-header",
  "description": "Page or section header component",
  "docUrl": "https://design.soracom.io/design-system/elements/header/",
  "category": "elements",
  "htmlElements": [
    "header",
    "div"
  ],
  "isWebComponent": false,
  "modifiers": {
    "color": {
      "support": "all"
    },
    "layout": {
      "support": "custom",
      "values": [
        "--sticky",
        "--sticky-0",
        "--sticky-20",
        "--sticky-40",
        "--sticky-60",
        "--sticky-80",
        "--sticky-100",
        "--sticky-120",
        "--sticky-140",
        "--sticky-160",
        "--sticky-180",
        "--sticky-200"
      ]
    },
    "variant": {
      "support": "custom",
      "values": [
        "--dark"
      ]
    }
  },
  "examples": [
    {
      "name": "basic",
      "html": "<header class=\"ds-header\"><div class=\"ds-logo\"></div><span class=\"ds-text\">App Title</span></header>"
    },
    {
      "name": "with-controls",
      "html": "<header class=\"ds-header\"><div class=\"ds-logo\"></div><span class=\"ds-text\">App Title</span><aside class=\"__controls\"><button class=\"ds-button --plain --icon-settings\"><span>Settings</span></button></aside></header>"
    },
    {
      "name": "dark",
      "html": "<header class=\"ds-header --dark\"><div class=\"ds-logo\"></div><span class=\"ds-text\">Dark Header</span></header>"
    },
    {
      "name": "color",
      "html": "<header class=\"ds-header --color-blue\"><div class=\"ds-logo\"></div><span class=\"ds-text\">Blue Header</span></header>"
    },
    {
      "name": "sticky",
      "html": "<header class=\"ds-header --sticky\"><div class=\"ds-logo\"></div><span class=\"ds-text\">Sticky Header</span></header>"
    }
  ]
}