{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "banner",
  "name": "Banner",
  "category": "Feedback",
  "description": "A full-width announcement bar for launches, maintenance notices or cookie-free notes. Dismissible.",
  "tags": [
    "banner",
    "announcement",
    "top bar",
    "notice bar",
    "promo bar",
    "system message"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "announcement bar",
      "maintenance notice",
      "top banner",
      "launch announcement"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/banner",
  "markdownUrl": "https://mian.ro/ai/components/banner.md",
  "classes": [
    {
      "name": "mn-banner",
      "description": "The bar. Accepts colour roles (defaults to ink)."
    },
    {
      "name": "mn-banner-soft",
      "description": "A tinted version."
    },
    {
      "name": "mn-banner-bordered",
      "description": "Rounded, for use inside a layout."
    },
    {
      "name": "[data-mn-dismiss=\".mn-banner\"]",
      "description": "A close button removes it (cancelable mn:dismiss)."
    }
  ],
  "accessibility": [
    "Use role=\"region\" with an aria-label so it can be found, or role=\"status\" if it appears after load.",
    "The close button needs a label. Keep the message short and put links inside the text."
  ],
  "examples": [
    {
      "title": "Banners",
      "description": null,
      "html": "<div class=\"mn-stack\">\n  <div class=\"mn-banner mn-banner-bordered\" role=\"region\" aria-label=\"Announcement\"><span>MIAN 1.3: new noodles and components.</span><a href=\"#\">See what’s new</a><button class=\"mn-close\" type=\"button\" data-mn-dismiss=\".mn-banner\" aria-label=\"Dismiss\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 6 6 18M6 6l12 12\"/></svg></button></div>\n  <div class=\"mn-banner mn-banner-soft mn-banner-bordered mn-warning\" role=\"region\" aria-label=\"Maintenance\"><span>Scheduled maintenance on Sunday, 02:00–03:00 UTC.</span><button class=\"mn-close\" type=\"button\" data-mn-dismiss=\".mn-banner\" aria-label=\"Dismiss\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 6 6 18M6 6l12 12\"/></svg></button></div>\n</div>"
    }
  ],
  "css": ".mn-banner {\n  --_a: var(--_c, var(--mn-fg)); --_af: var(--_cf, var(--mn-bg));\n  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem 1rem;\n  padding: .6rem 3rem .6rem 1rem; position: relative;\n  background: var(--_a); color: var(--_af);\n  font: 500 var(--mn-text-sm)/1.4 var(--mn-font); text-align: center;\n}\n.mn-banner a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }\n.mn-banner > .mn-close { position: absolute; right: .5rem; top: 50%; margin: 0; translate: 0 -50%; color: inherit; opacity: .8; }\n.mn-banner > .mn-close:hover { background: color-mix(in oklab, currentColor 14%, transparent); color: inherit; opacity: 1; }\n.mn-banner-soft { background: color-mix(in oklab, var(--_c, var(--mn-primary)) 12%, var(--mn-surface)); color: var(--_ct, var(--mn-fg)); }\n.mn-banner-bordered { border-radius: var(--mn-radius-box); }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/banner.json"
  }
}