{
  "name": "ds-notice",
  "description": "Notice/alert component",
  "docUrl": "https://design.soracom.io/design-system/elements/notice/",
  "category": "elements",
  "htmlElements": [
    "div",
    "a"
  ],
  "isWebComponent": false,
  "modifiers": {
    "color": "all",
    "gradient": "all",
    "visual-state": [
      "--alert",
      "--warning",
      "--success",
      "--info"
    ],
    "variant": [
      "--plain",
      "--strong",
      "--fee",
      "--flag",
      "--pinned"
    ],
    "layout": [
      "--center"
    ],
    "state": [
      "--loading",
      "--loading-refresh"
    ],
    "icon": "all",
    "indent": "all"
  },
  "examples": [
    {
      "name": "basic",
      "html": "<div class=\"ds-notice\"><p>Notice message</p></div>"
    },
    {
      "name": "alert",
      "html": "<div class=\"ds-notice --alert\"><p>Alert notice with automatic warning icon.</p></div>"
    },
    {
      "name": "warning",
      "html": "<div class=\"ds-notice --warning\"><p>Warning notice with automatic notice icon.</p></div>"
    },
    {
      "name": "success",
      "html": "<div class=\"ds-notice --success\"><p>Success notice with automatic check icon.</p></div>"
    },
    {
      "name": "info",
      "html": "<div class=\"ds-notice --info\"><p>Info notice with automatic info icon.</p></div>"
    },
    {
      "name": "strong",
      "html": "<div class=\"ds-notice --strong\"><p>Strong notice with full background and contrasting text.</p></div>"
    },
    {
      "name": "plain",
      "html": "<div class=\"ds-notice --plain\"><p>Plain notice with transparent background.</p></div>"
    },
    {
      "name": "fee",
      "html": "<div class=\"ds-notice --fee\"><p>Fee notice with gradient styling.</p></div>"
    },
    {
      "name": "flag",
      "html": "<div class=\"ds-notice --flag\"><p>Flag-style notice.</p></div>"
    },
    {
      "name": "pinned",
      "html": "<div class=\"ds-notice --pinned\"><p>Pinned notice with no border radius, for top-of-page placement.</p></div>"
    },
    {
      "name": "center",
      "html": "<div class=\"ds-notice --center\"><p>Centered notice.</p></div>"
    },
    {
      "name": "with-icon",
      "html": "<div class=\"ds-notice --icon-star\"><p>Custom icon notice.</p></div>"
    },
    {
      "name": "color-blue",
      "html": "<div class=\"ds-notice --color-blue\"><p>Blue notice.</p></div>"
    },
    {
      "name": "with-close-button",
      "html": "<div class=\"ds-notice --info\"><button class=\"ds-button --close\" title=\"Close\"><span>Close</span></button><p>Notice with a close button.</p></div>"
    },
    {
      "name": "with-heading",
      "html": "<div class=\"ds-notice --alert\"><h3>Important Notice</h3><p>Alert notice with a heading.</p></div>"
    }
  ]
}