BANNER: Full-bleed site-wide notice strip
VARIANTS: Info | Warning | Danger — dismissible or persistent
Sits above the page shell, edge-to-edge (in a real page it spans the full viewport width,
outside .page-container) — unlike .inline-notification, which
lives inside content flow as a rounded card. Use for application deadlines, maintenance
windows, and platform-wide policy notices. Each example below is shown at content width
for the preview; in production it stretches full-bleed.
Shell placement: first child of body.app, above the sidebar
and topbar — it's in-flow, so no z-index coordination is needed, it just pushes the shell
down by its own height:
<body class="app"><div class="banner …">…</div><div data-controller="sidebar">…shell…</div></body>
.banner-warning: dark ink on tinted yellow (state-warning trio, passes
AA). role="status" — important but not urgent enough for
role="alert". .banner-action is a bold underlined inline link;
.banner-close dismisses just this strip.
<div class="banner banner-warning" role="status" data-controller="banner"><div class="banner-body">…<button class="banner-action">…</button></div><button class="banner-close" data-action="click->banner#dismiss">…</button></div>
Persistent: omit data-controller and
.banner-close entirely when the notice must stay visible for the whole
session (e.g. a preview-environment disclaimer).
<div class="banner banner-info" role="status"><div class="banner-body">…</div></div>
.banner-danger: role="alert" — failures serious enough
that screen readers should announce them immediately on render, unlike
role="status"'s polite queueing.
<div class="banner banner-danger" role="alert" data-controller="banner">…</div>