Banner
横幅提示
A full-width strip pinned to the top or bottom of the page that carries a message about the whole app.
Live Demo
Actually clickableYou're offline — this content may be out of date
Page content goes here
What you just saw:The yellow strip at the top of a site reading "This site will be down tonight at 2:00", the bar at the top of an app reading "You are currently offline".
What it actually is
A banner is the global version of an alert: it belongs to no particular form or section, it speaks for the entire app or site — maintenance windows, network outages, new version notices.
Anatomy · What it's made of
Strip条状容器
Full width, solid color background
Icon图标
Optional
Message消息
Centered or left-aligned
Dismiss关闭
Optional ✕ the user can close it
Action操作
Such as "Update" or "Retry"
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| A condition affects the entire app (offline, under maintenance) | Yes |
| The notice is global and unrelated to any specific piece of content | Yes |
| Users should know about it, but it should not interrupt their work | Yes |
| The error belongs to one particular input field | No |
A banner belongs above the content, at the top. Parked at the very bottom of the page it is the same as invisible.
Do not use a banner for marketing — that is the landing page hero banner’s job, not the product UI.
Similar Patterns
Don't mix these upBannerCurrent
横幅提示
A full-width strip pinned to the top or bottom of the page that carries a message about the whole app.
Alert
警示框
A message that has to be taken seriously: something broke, something is at risk, and you need to act on it.
In one line:A full-width strip pinned to the top or bottom of the page that carries a message about the whole app.
Alert
警示框
A message that has to be taken seriously: something broke, something is at risk, and you need to act on it.
Toast
轻提示
A small confirmation that drifts into the corner of the screen after an action and disappears on its own a few seconds later.
Badge
角标
A tiny marker pinned to the corner of an icon or avatar that says "there is something you need to look at".
How to tell AI
Three levels of promptAdd the component name and specifics
Add a global banner at the top of the page: "You are offline, content may be out of date" plus a "Retry" button. The user can dismiss it manually, and that dismissed state lasts for the current session.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add a notice bar at the top.
Say this instead
Add a global banner (full width, role=status): show "You are offline" plus a "Retry" button, let the user dismiss it with the state stored in sessionStorage, and listen to online/offline events to show it automatically and swap the copy when connectivity returns.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.