{
  "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": "all",
    "layout": [
      "--sticky",
      "--sticky-0",
      "--sticky-20",
      "--sticky-40",
      "--sticky-60",
      "--sticky-80",
      "--sticky-100",
      "--sticky-120",
      "--sticky-140",
      "--sticky-160",
      "--sticky-180",
      "--sticky-200"
    ],
    "variant": [
      "--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>"
    }
  ]
}