Design Atlas
한국어
▭ Landing page patterns

Announcement bar

공지 바

A thin, dismissible strip above the header announcing a promo or notice.

Also known as: Promo barTop bannerMarquee bar
···
html
<div class="page">
  <div class="bar" id="bar"><span id="msg">Launch week — 20% off with code LAUNCH20</span><span class="close">&times;</span></div>
  <div class="header"><b class="logo"></b><div class="nav"><i></i><i></i><i></i></div></div>
</div>
css
.page{width:min(94%,780px);border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.bar{background:var(--fg);color:var(--bg);display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vmin,16px);
  padding:clamp(5px,1.4vmin,10px) clamp(8px,2vmin,16px);font-size:clamp(7px,1.4vmin,11px);font-weight:600;position:relative}
.close{position:absolute;right:clamp(6px,1.6vmin,12px);opacity:.7;font-size:1.2em;line-height:1}
.header{display:flex;align-items:center;justify-content:space-between;padding:clamp(6px,1.6vmin,12px) clamp(8px,2vmin,16px)}
.logo{width:16%;height:clamp(7px,1.5vmin,11px);border-radius:3px;background:var(--accent)}
.nav{display:flex;gap:clamp(6px,1.4vmin,10px)}
.nav i{width:clamp(14px,3vmin,22px);height:clamp(4px,1vmin,7px);border-radius:2px;background:var(--line)}
js
const MSGS = ['Launch week — 20% off with code LAUNCH20', 'New: team workspaces are here', 'Now available on mobile'];
const msg = document.getElementById('msg');
let i = 0;
setInterval(function () {
  msg.style.opacity = 0;
  setTimeout(function () {
    i = (i + 1) % MSGS.length;
    msg.textContent = MSGS[i];
    msg.style.opacity = 1;
  }, 300);
}, 2600);
msg.style.transition = 'opacity .3s';

Sits above even the header — the very first thing on the page. Space is tight, so the message stays to one line: something urgent ("20% off with code SAVE20") or a short notice ("v2.0 is out").

A close (X) button is close to mandatory — without it, returning visitors see the same line every time, which reads as annoying rather than helpful. With multiple messages to announce, crossfading them every few seconds is common. If there's a link, making the whole bar clickable (not just a tiny "Learn more") helps.

Once dismissed, that state needs to persist for the session (or a few days) — reappearing every visit burns trust fast. And because the bar pushes the real header down, check that nothing else on the page assumes `position:fixed` from the very top of the viewport.

When to use

Only for time-bound promos or genuinely important notices. Permanent information (logo, nav) belongs in the header — the default is to leave this bar empty.