Banner
A full-width announcement bar for launches, maintenance notices or cookie-free notes. Dismissible.
Banners
<div class="mn-stack">
<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>
<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>
</div>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/banner.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-banner | The bar. Accepts colour roles (defaults to ink). |
| mn-banner-soft | A tinted version. |
| mn-banner-bordered | Rounded, for use inside a layout. |
| [data-mn-dismiss=".mn-banner"] | 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.