Banner

One band for the four that exist today: consent, push prompt, daily brief and quick access. A banner interrupts, so it earns its place or it goes.

A promotion in the page flow

HTML

<div class="p234-banner">
  <div class="p234-banner__body">
    <p class="p234-banner__title">The Daily Brief</p>
    <p class="p234-banner__text">The day's stories in one email, every weekday morning.</p>
    <div class="p234-banner__actions">
      <a class="p234-btn" href="#">Subscribe</a>
      <a class="p234-btn p234-btn--secondary" href="#">See a sample</a>
    </div>
  </div>
  <button class="p234-banner__dismiss" type="button" aria-label="Dismiss">&times;</button>
</div>

Information about the data on the page

HTML

<div class="p234-banner p234-banner--info">
  <div class="p234-banner__body">
    <p class="p234-banner__title">Official figures end in May 2026</p>
    <p class="p234-banner__text">The National Bureau of Statistics publishes quarterly and runs about four months behind. Reported prices on this page are from this week.</p>
  </div>
</div>

A warning

HTML

<div class="p234-banner p234-banner--warning">
  <div class="p234-banner__body">
    <p class="p234-banner__title">This state's official site is offline</p>
    <p class="p234-banner__text">Government announcements for Yobe are hidden until the source is verified again.</p>
  </div>
</div>

The four it replaces

ConsentBanner, PushPromptBanner, DailyBriefBanner and QuickAccessBanner are one component with different copy and one variant. Only consent is allowed to sit over the page; the rest live in the flow.

Rules

One banner on screen at a time. Two is an argument the reader did not ask to referee.
Make a dismissal stick. A promotion that comes back every page view is an advert with extra steps.
Ask for push permission after the reader has done something, not on arrival. Asked on the first page view it is nearly always refused, and a refusal is permanent.
Give the dismiss control a real label and a 44px target.

Never put a banner between the headline and the first paragraph.
Never stack consent, push and newsletter on the same screen. That is three interruptions before a word is read.
Do not use a banner for an error on a form. That belongs beside the field.

Consent is the exception

The consent banner may be fixed over the page, because it has to be answered. Everything else waits its turn in the flow. It uses z.overlay, so a toast still appears above it.

Tokens this component reads

--p234-color-paper--p234-color-paper-alt--p234-color-rule--p234-color-brand--p234-color-info--p234-color-warning--p234-color-ink--p234-color-ink-muted--p234-z-overlay--p234-shadow-overlay--p234-field-height--p234-border-heavy