# Banner · MIAN

A full-width announcement bar for launches, maintenance notices or cookie-free notes. Dismissible.

- Id: `banner` · Category: Feedback · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/banner
- Use for: announcement bar, maintenance notice, top banner, launch announcement.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `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.

## Examples

### Banners

```html
<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>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/banner/source