Banners

Summary

A full-width bar at the very top of the page for system-wide state: maintenance windows, license warnings, lost connectivity. Banners sit in normal flow above the header and push the page down (they never overlap content) and persist until closed. For transient feedback about a completed action, use a flag instead; for inline section-level notices, a message.

Banners are server-renderable as static markup (the normal case for Velocity pages; auto-init wires the optional close button), or created dynamically with Neura.banner(), which announces them to screen readers (role="alert" for error/warning, role="status" for announcements). The announcement variant uses the brand primary token, so it follows themes.

When to use

Variant	Use it for
Announcement `.neura-banner-announcement`	Neutral system-wide notices: planned maintenance, new-version announcements. Brand-colored, follows the active theme.
Warning `.neura-banner-warning`	Conditions needing attention soon: license expiring, degraded service.
Error `.neura-banner-error`	Active system problems: connection lost, read-only mode.

Examples

Static banners (scoped to this box for the demo; real ones span the page top):

Dynamic banners insert at the real page top:

HTML

<div class="neura-banner neura-banner-warning">
  <div class="neura-banner-content">
    Scheduled maintenance tonight 22:00–23:00 UTC.
  </div>
  <button class="neura-banner-close" aria-label="Dismiss">
    <span class="neura-icon neura-icon-close"></span>
  </button>
</div>

JavaScript API

const b = Neura.banner({
  type: 'announcement',   // announcement | warning | error
  body: 'Maintenance tonight.',      // plain text; bodyHtml for markup
  close: 'never',         // 'never' (default) | 'manual'
});

b.close();                // dismiss programmatically (removes the banner)
b.on('close', fn);        // or: 'neura-banner-close' DOM event
                          //   (bubbles; fires just before removal)
b.el;                     // the banner element

// Wrap existing markup - selector or element; returns the same
// instance for the same element on repeated calls.
Neura.banner('#server-rendered');

AUI compatibility

None: AUI 5.4 had no banner (AUI 6 later added an error-only one). Neura-native, no aui-* alias or AJS facade entry.