{
  "name": "ds-banner",
  "description": "Banner for important messages",
  "docUrl": "https://design.soracom.io/design-system/elements/banner/",
  "category": "elements",
  "htmlElements": [
    "header",
    "a",
    "div"
  ],
  "isWebComponent": false,
  "modifiers": {
    "color": "all",
    "gradient": "all",
    "visual-state": [
      "--alert",
      "--warning",
      "--success",
      "--info"
    ],
    "variant": [
      "--plain",
      "--simple",
      "--hero",
      "--feature",
      "--strong"
    ],
    "layout": [
      "--center",
      "--sticky",
      "--rounded",
      "--outdent"
    ],
    "icon": "all",
    "indent": "all",
    "gap": "all"
  },
  "examples": [
    {
      "name": "basic",
      "html": "<header class=\"ds-banner\"><div><h2>Banner Title</h2><p>Banner description text.</p></div></header>"
    },
    {
      "name": "plain",
      "html": "<header class=\"ds-banner --plain\"><div><h2>Plain Banner</h2><p>No background texture.</p></div></header>"
    },
    {
      "name": "simple",
      "html": "<header class=\"ds-banner --simple\"><div><h2>Simple Banner</h2><p>Simplified background.</p></div></header>"
    },
    {
      "name": "hero",
      "html": "<header class=\"ds-banner --hero\"><div><h2>Hero Banner</h2><p>Large hero-style banner with extra padding.</p></div></header>"
    },
    {
      "name": "feature",
      "html": "<header class=\"ds-banner --feature\"><div><h2>Feature Banner</h2><p>Feature-style banner with strong background.</p></div></header>"
    },
    {
      "name": "strong",
      "html": "<header class=\"ds-banner --strong\"><div><h2>Strong Banner</h2><p>Full opacity background with contrasting text.</p></div></header>"
    },
    {
      "name": "rounded",
      "html": "<header class=\"ds-banner --rounded\"><div><h2>Rounded Banner</h2><p>Banner with rounded corners.</p></div></header>"
    },
    {
      "name": "alert",
      "html": "<header class=\"ds-banner --alert\"><div><h2>Alert</h2><p>Alert banner message.</p></div></header>"
    },
    {
      "name": "success",
      "html": "<header class=\"ds-banner --success\"><div><h2>Success</h2><p>Success banner message.</p></div></header>"
    },
    {
      "name": "with-icon",
      "html": "<header class=\"ds-banner\"><i class=\"ds-icon --icon-star\"></i><div><h2>Banner with Icon</h2><p>Banner with a leading icon.</p></div></header>"
    },
    {
      "name": "with-button",
      "html": "<header class=\"ds-banner\"><div><h2>Banner with Action</h2><p>Banner with an action button.</p></div><button class=\"ds-button --plain\"><span>Action</span></button></header>"
    },
    {
      "name": "color-blue",
      "html": "<header class=\"ds-banner --color-blue\"><div><h2>Blue Banner</h2><p>Blue-themed banner.</p></div></header>"
    },
    {
      "name": "sticky",
      "html": "<header class=\"ds-banner --sticky\"><div><h2>Sticky Banner</h2><p>This banner sticks to the top.</p></div></header>"
    },
    {
      "name": "as-link",
      "html": "<a class=\"ds-banner\" href=\"#\"><i class=\"ds-icon --icon-star\"></i><div><h2>Clickable Banner</h2><p>This entire banner is a link.</p></div></a>"
    }
  ]
}