39Banner

An app-level notice: trial ending, scheduled maintenance, “you are viewing a draft”. Full-bleed, above the content, persistent until dismissed.

Use it for

Something true regardless of which page the reader is on
State that stays true until something external changes it

Not for

Feedback about a form or a lesson — that is an Alert, inline and next to the thing
Confirming an action just taken — that is a Toast
Two at once: stacked banners is a product telling the reader it has lost track of what matters

Info and warning

Status recolours the leading EDGE, not the whole strip. A full-width warning wash is the loudest thing a page can do, and this is ambient information.

markup

<div class="ns-banner ns-banner--info">
  <i class="ph ph-info ns-banner__icon" aria-hidden="true"></i>
  <span class="ns-banner__text">You are viewing an unpublished draft.</span>
  <a class="ns-btn ns-btn--outline ns-btn--sm ns-banner__action" href="#0">View published</a>
  <button class="ns-banner__dismiss" type="button" aria-label="Dismiss"><i class="ph ph-x" aria-hidden="true"></i></button>
</div>
<div class="ns-banner ns-banner--warning">
  <i class="ph ph-warning ns-banner__icon" aria-hidden="true"></i>
  <span class="ns-banner__text">Scheduled maintenance on 14 September, 02:00–04:00 UTC.</span>
  <button class="ns-banner__dismiss" type="button" aria-label="Dismiss"><i class="ph ph-x" aria-hidden="true"></i></button>
</div>

Dark

markup

<div class="ns-banner ns-banner--dark">
  <i class="ph ph-megaphone ns-banner__icon" aria-hidden="true"></i>
  <span class="ns-banner__text">New: the Apex testing track is live.</span>
  <a class="ns-btn ns-btn--primary ns-btn--sm ns-banner__action" href="#0">Start</a>
</div>

Accessibility contract

Not a live region — it is present on load, so announcing it would interrupt
The action is a link because a banner's action always goes somewhere (billing, the schedule, the published version)
Dismiss has a real accessible name