The First Line Every Visitor Reads.

One line, full width, above everything: say what shipped, when maintenance lands, or which event starts Friday — and say when it disappears. Describe the message and its expiry, and MeDo generates a banner that dismisses and stays dismissed, yields to the cookie banner instead of fighting it, and never lingers past the news it carries.

A Banner That Outstays Its Message Becomes Wallpaper

An announcement banner is the only element that interrupts every visitor by default, which is why its craft is mostly knowing when to stop. A release note that lingers three months, a promo that expired Tuesday, a maintenance warning from last week — each one teaches visitors that banners are wallpaper, and the next genuinely urgent notice dies unread. So the component is defined by its lifecycle as much as its layout: one message at a time, dismissal remembered per announcement, a hard expiry date, and persistence reserved for the two cases where silence is worse — consent law and active incidents. The other half is arbitration: the cookie banner outranks it, because consent is not a promotion, so a well-behaved announcement waits, queues, or holds its slot until the legal layer is settled. Run that discipline and the strip above your navbar stays an asset instead of a tax on every page load.

4 Vorlagen

Announcement Banner-Vorlagen, die Sie generieren können

Jede Vorlage ist ein echter Prompt, kein Screenshot. Kopieren Sie ihn in einen KI-Editor oder führen Sie ihn in MeDo aus und erhalten Sie React- und Tailwind-Code zurück.

MarketingRelease Note

Dismissible What's-New Bar

The default pattern: one line above the navbar, a link to the changelog, and a dismissal remembered per announcement so the slot stays clean for the next message.

Create a dismissible release-announcement banner above the navbar: 40px tall, indigo-600 background, 13px white text reading MeDo 2.4 is live with the version as a semibold link to the changelog, plus an X dismiss button with aria-label Dismiss announcement. Dismissal stores the announcement id in localStorage, so this message never returns but the next one does. Reserve the bar's height on first render to avoid layout shift while stored state is read. The link takes a white focus-visible ring and an indigo-700 hover underline; the dismiss button shows a white 10% background on hover. On mobile the text truncates to one line with ellipsis instead of pushing content down. The bar is role="region" with an aria-label — never role="alert".

In MeDo testen

StatusMaintenance Window

Persistent Incident or Maintenance Notice

The one banner allowed to be non-dismissible: while the thing is down, silence is the worse option. Amber, specific, and self-expiring when the window closes.

Create a non-dismissible maintenance banner pinned below the navbar: full-width amber-100 background with amber-900 text, a small clock icon, and the copy Scheduled maintenance Sunday 02:00–04:00 UTC — dashboards in read-only mode. The time range comes from props as ISO start and end; the banner renders only between those timestamps and removes itself after the end without a deploy. Because it appears mid-session it uses role="status" so screen readers announce it politely, once. Keep it under 48px tall, give any link a visible focus ring, and render a compact mobile version reading Maintenance 02:00–04:00 UTC. Since it cannot be dismissed, cap it at two lines and let the expiry do the cleanup.

In MeDo testen

EventEvent Countdown

Webinar Banner With Live Countdown

Date-driven urgency that cleans up after itself: counts down to the event, switches to a live badge when it starts, and vanishes when it ends.

Build an event banner with a live countdown: dark zinc-900 bar, white text, the event name as a semibold link, and a countdown chip showing days, hours and minutes in tabular numerals updated every 30 seconds. Before the event it reads Webinar: Shipping with AI agents — Thu 14:00 UTC; when the start time passes, the chip swaps to a green-400 Live now label with a pulsing dot that holds still under prefers-reduced-motion, and 30 minutes after the end the entire banner unmounts. A Register button renders as a white pill with zinc-900 text and a focus-visible ring. The banner is dismissible with per-event-id memory, and the countdown shares one interval across instances rather than one timer per banner.

In MeDo testen

PromoPromo Code

Discount Banner With Copyable Code

The banner whose entire job is one string reaching the clipboard: copy with confirmation, terms link, a hard expiry — and it stays out of the cookie banner's way.

Create a promotional banner with a copyable code: a subtle gradient background, 14px text reading Save 20% on annual plans, and a dashed-border code chip ANNUAL20 with a Copy button. Clicking copies to the clipboard, swaps the label to Copied for two seconds with a check icon, and confirms through a polite aria-live region. A 12px underlined terms link opens the offer conditions. The banner carries an ISO expiry date and never renders after it passes; a preview override prop lets marketing verify the design before launch. It is dismissible with remembered dismissal, and it holds off rendering while the cookie consent banner is unresolved — consent wins the slot, the promo waits.

In MeDo testen

So passen Sie Ihre Announcement Banner an

One banner slot, one message, strict queue

Two stacked banners halve the readership of each and triple the visual tax on every page. Decide at generation time that the slot holds one message, decide which message wins (maintenance outranks marketing; consent outranks both), and hold the rest in a queue — or better, in next week's slot. If everything is urgent, the banner is already dead.

Expiry belongs in the data, not in someone's calendar

Give the banner ISO start and end timestamps from the CMS or props, and let it render itself in and out of existence. The stale-banner failure is never a design failure — it is a missing expiry — and a preview-override prop lets marketing verify the design before the window opens without waiting for the clock.

Make dismissal a first-class feature

Store the dismissal against the announcement's id, not a global flag, so the next message still shows; keep the dismissal across pages and sessions; animate the exit briefly so the content shift does not feel like a glitch. A banner the user has dismissed twice is not a banner anymore — it is spam with a brand color.

Match placement to persistence

Dismissible marketing belongs above the navbar, where it reads as part of the page shell and scrolls away naturally. Persistent notices — maintenance windows, incidents — attach below the navbar instead, so sticky-header offsets do not need recalculating when the banner finally unmounts and the whole page does not jump by 40px mid-session.

Wer die Announcement Banner-Komponente nutzt

SaaS product site

A release-note bar above the navbar: version number as a link to the changelog, dismissible with per-id memory, and a hardcoded expiry matching the next planned announcement so the slot never goes stale.

E-commerce store

A shipping-deadline notice during peak season — "Order by Dec 20 for delivery before the holidays" — persistent but self-expiring the moment the deadline passes, handing the slot to the next scheduled promo without a deploy.

Developer platform

Deprecation and maintenance notices with dates and affected-region detail, persistent through the window, linking to the status page. The audience reads banners carefully here — which is exactly what years of honest, expiring notices buy.

Event or conference site

A countdown banner for early-bird pricing or webinar start times that switches to Live now when the moment arrives and unmounts when it passes — urgency with an automatic end instead of a manual cleanup ticket.

Announcement Banner-Muster für verschiedene Websites

Dieselbe announcement banner-Komponente, abgestimmt auf die Art der Website, auf der sie läuft.

01 / 04

SaaS Product Sites

Release notes and feature launches live here, one message at a time with a link to the changelog. The discipline that keeps the slot alive: every banner ships with an expiry matching the next planned announcement, so wallpaper cannot accumulate.

Announcement Banner-Stile und -Varianten

Wählen Sie die Variante, die zum Rest der Seite passt, und generieren Sie sie.

01 / 04

Solid Brand Bar

Flat brand color, white text, one link, one dismiss button. The default because it reads as official site chrome rather than an advertisement — which matters when you are asking for the first line of every page.

Announcement Banner in React, Next.js, Vue und Svelte

React, Next.js, Vue 3, SvelteKit, Astro oder reines HTML — dieselbe announcement banner, sechs Wege zur Einbindung.

01 / 03

React Announcement Banner

Dismissal keyed by announcement id plus an expiry check, in one early return. Note the SSR caveat: localStorage is read lazily on the client, which is exactly why the banner reserves its height to avoid layout shift.

src/components/AnnouncementBanner.tsx

const EXPIRES_AT = new Date('2026-10-31T00:00:00Z')

function AnnouncementBanner({ id }: { id: string }) {
  const [hidden, setHidden] = useState(() => {
    if (typeof window === 'undefined') return false
    return Date.now() > +EXPIRES_AT || localStorage.getItem(`banner-${id}`) === '1'
  })
  if (hidden) return null
  return (
    <div role="region" aria-label="Site announcement"
         className="flex h-10 items-center bg-indigo-600 px-4 text-sm text-white">
      <p>MeDo 2.4 is out. <a className="font-semibold underline" href="/changelog">Read more</a></p>
      <button aria-label="Dismiss announcement" className="ml-auto"
        onClick={() => { localStorage.setItem(`banner-${id}`, '1'); setHidden(true) }}>
        ✕
      </button>
    </div>
  )
}

So fügen Sie Ihre Announcement Banner einem Projekt hinzu

Vier Schritte, von der Auswahl einer announcement banner-Vorlage bis zum Einsatz in der Produktion.

01~2min

Write the Message and Its Expiry Together

A banner without an end date is a design decision you are deferring to your own forgetfulness. Draft the one line, the link target, and the ISO end timestamp in the same breath — if you cannot name when it comes down, it is not ready to go up.

02~1min

Pick Placement and Dismissibility

Dismissible marketing goes above the navbar; persistent status attaches below it, away from sticky-header offsets. Default to dismissible unless the message protects the visitor, and decide now what it yields to — the cookie banner's claim on the slot is not negotiable.

03~3min

Generate With the Arbitration Rules

Run the prompt and MeDo hands the banner back as live React + Tailwind. Say the quiet parts out loud in the prompt: per-id dismissal memory, reserved height against layout shift, role="region" not role="alert", and no focus theft on load. These are the details generation otherwise guesses on.

04~2min

Test the Lifecycle and Ship

Walk the four states before publishing: fresh visit shows it, dismissal hides it across pages and sessions, the next announcement id brings it back, and the end timestamp removes it without a deploy. Then hardcode the removal date into whatever reminder system your team actually reads.

Häufige Fragen zu Announcement Banner

Should an announcement banner be dismissible or persistent?

Dismissible by default, persistent only when ignoring it harms the visitor: legal notices and active incidents. Marketing messages that cannot be dismissed stop being messages and become fixtures — users develop banner blindness within days and your slot dies with them. The middle path covers most cases: dismissible with per-announcement memory, so this message stays gone but the next one shows, plus a hard expiry so even undismissed banners leave on schedule.

How do I stop the announcement banner fighting the cookie banner?

Consent wins, because it is a legal gate and the announcement is a message. The working arbitration: while consent is unresolved, the announcement either does not render, renders below the cookie banner, or queues and appears after the visitor answers. What never works is both at full strength at once — two bars competing for first paint is the fastest way to teach visitors that neither matters. Hard-code the priority in the component, not in a per-campaign decision someone has to remember.

Should the banner go above or below the navbar?

Above the navbar for dismissible marketing: it reads as part of the page shell, pushes content down honestly, and scrolls away. Below the navbar for persistent notices, so the sticky header does not need a dynamic offset that breaks when the banner unmounts mid-scroll. The detail that bites both placements is layout shift — reserve the banner's height on first paint so content does not jump 40px after hydration, and animate any removal over ~150ms so the shift reads as intentional.

How should screen readers encounter the banner?

Content present at page load is already announced — do not make it an alert. Give the bar role="region" with an aria-label like "Site announcement" so it is a landmark users can find or skip, keep the dismiss button a real button with a name, and never move focus to the banner on load. Only a banner that appears mid-session after a status change deserves role="status" for a polite announcement; role="alert" is reserved for genuinely urgent incidents, and using it for a promo teaches assistive-tech users to distrust your urgency.

How do I make sure the banner disappears when the news does?

Put the expiry in the data: ISO start and end timestamps rendered from the CMS or props, checked at render time, so the banner appears and unmounts itself without a deploy. Pair it with per-id dismissal memory and a preview-override prop for checking the design before the window opens. The organizational failure mode is a banner owned by no one — if your CMS cannot schedule the window, the next-best contract is a hardcoded end date in the same commit that ships the banner.

Announcement banner, toast, alert, or modal — which one for my message?

Pick by relationship to the user's task. A toast confirms something the user just did and vanishes on its own; an alert lives inline in a context — a form, a panel — and explains a problem there; a modal stops the task entirely and demands a decision. An announcement banner is none of these: it is ambient, page-scoped, addressed to everyone, and ignorable — one line the visitor reads or scrolls past. If the message must interrupt a specific user's flow, it wants a toast; if it must block everyone until answered, that is a modal wearing a banner costume and should be honest about it.

Erstelle deine announcement banner jetzt.

Probiere jeden Prompt – kostenlos, keine Anmeldung erforderlich.

Kostenlos mit dem Bauen beginnen Preise ansehen

Cookie-Banner

Beschreiben Sie das Cookie-Consent-Erlebnis, das Sie benötigen — Banner-Stil, Button-Beschriftungen, Rechtstexte, Farbschema — und MeDo generiert sofort produktionsreifen Code. Veröffentlichen Sie einen konformen, markenkonsistenten Cookie-Banner ohne Boilerplate.

Verwandte Komponenten

Toast

Beschreiben Sie Ihr Benachrichtigungsverhalten und MeDo generiert das komplette Toast-System — vier semantische Typen, eine Stapel-Warteschlange, Auto-Ausblende-Timer, die beim Hover pausieren, Wegwischen per Touch und die passende aria-live-Höflichkeitsstufe für jeden Typ.

Verwandte Komponenten

Alert

Beschreiben Sie die Meldung und MeDo generiert den vollständigen Inline-Alert-Satz — Info-, Erfolgs-, Warn- und Fehlervarianten mit Akzentleiste, Icon, Titel, Beschreibung, optionalem Aktionslink und einem Schließen-Steuerelement, wenn der Alert nicht dauerhaft ist.

Verwandte Komponenten

Navbar

Beschreiben Sie Ihre Website und erhalten Sie eine vollständig responsive Navbar — mit Logo, Nav-Links, Dropdown-Menüs und einem mobilen Hamburger-Menü — aus einem einzigen Prompt generiert. Keine Vorlagen, kein Herumschrauben.

Verwandte Komponenten