Banner
A full-width message at the top of a page or app, for conditions that affect everything below it.
A banner claims the most valuable strip of the screen, so the bar for using one is whether the message genuinely applies to the entire page: degraded service, a trial ending, an account-wide restriction, scheduled maintenance. Anything narrower belongs next to the thing it concerns as an alert, and anything transient belongs in a toast.
Banners accumulate. Cookie consent, a promotion, a browser warning and an expiring-card notice all ship independently, each justified alone, and together they push the actual product below the fold. The fix is a policy rather than a component: one banner at a time, with an explicit priority order, and a rule that a promotional banner never outranks a functional one.
Layout, not overlay
A banner should push the page down, not float over it. Fixed banners that overlay content break anchor links, hide the first heading, and cover sticky headers. If it must be fixed, the layout has to account for its height.
In practice
A SaaS product ran a cookie bar, a “new pricing” promo and a payment-failure notice at once. On a 13-inch laptop the dashboard started 240px down. Enforcing one banner with a priority order — functional beats promotional — recovered the fold and, incidentally, raised click-through on the promo, because it now appeared alone.
Where teams get it wrong
- More than one banner at a time. Each one was justified on its own and together they own the fold.
- Promotional banners outranking functional ones, so the payment-failure notice is the one that got cut.
- Fixed banners overlaying content and breaking in-page anchors.
- No dismissal and no memory, so the same announcement appears on every page load forever.
- Banner text that states a condition but no action — “Your plan is expiring” with nothing to click.
( Learn more )
Related terms
All terms- AlertAn in-page message about something needing attention — persistent, placed where it applies, and gone only when the condition is.
- Toast NotificationA brief message that appears over the interface to confirm an action or report a problem, then disappears on its own.
- NavbarThe persistent top bar carrying a product's primary destinations, identity and account controls.
- Status IndicatorA persistent signal of a system or record's current condition — distinct from a message about something that just happened.