Announcement banners, consent bars and site alerts#
A banner interrupts. That is its function and its risk, so the useful question is not how it looks but what happens the second time somebody sees it. These five cover the announcement, the promotion, consent and the in-product alert.
The five banner blocks#
- Banner 1: a dismissible announcement bar that remembers the choice. Free.
- Banner 2: a promo banner with a live countdown and a copyable discount code.
- Banner 3: a cookie consent bar with a granular preferences dialog.
- Banner 4: a delayed, scroll-gated floating announcement card with a spring entrance.
- Banner 5: a token-only site alert system covering a sticky strip, page banners and inline banners.
Dismissal that sticks#
Banner 1 stores the dismissal, so closing it once keeps it closed on the next visit. A banner that reappears on every page load is the fastest way to train people to ignore every banner you will ever show, including the one that matters.
Cookie consent#
Banner 3 is a consent bar with a granular preferences dialog, so somebody can accept categories individually rather than choosing between all and nothing. It is the interface only. Which categories you offer, what you do before consent, and what the answer legally means are decisions for your site and your jurisdiction, not something a block can decide for you.
Promotions with a countdown#
Banner 2 pairs a countdown with a copyable code. Drive the end time from your campaign data so the timer cannot outlive the offer, and copy the code to the clipboard rather than asking somebody to select six characters on a phone.
Where a banner is the wrong tool#
A banner is for something time-bound that a visitor can act on now: an outage, a launch, an offer with an end date. It is not a place for a permanent value proposition, which belongs in the hero, or for a message aimed at one segment, which belongs wherever that segment already is. A banner that is always there stops being read within two visits, and takes the next one down with it.
One severity vocabulary#
Banner 5 shares its severity map with the notification blocks, so red means the same thing in a marketing banner and an in-product alert. A site with two unrelated ideas of what red means has, in effect, no colour vocabulary at all, and every warning after that gets read as decoration.
Where to place a banner#
Above the navbar for a site-wide announcement, so it pushes the page rather than covering it. The floating card in Banner 4 is scroll-gated and delayed on purpose: an interruption is more tolerable once somebody has shown interest than on arrival. For an offer that deserves the whole page, a call to action section carries it better than a strip.
