A banner carries a page-wide or system-level message: an outage, planned maintenance, a campaign or a notice to one customer group. It sits at the top and stays until it is closed or the situation changes.
How to build a banner and the CSS behind it. The files are eco-design-system/notifications.css and notifications.js.
Link the shared files once per page. Never copy the rules into a page.
| Step | What to do |
|---|---|
| 1. Link | <link rel="stylesheet" href="/eco-design-system/notifications.css"> and <script src="/eco-design-system/notifications.js"></script>. Link button.css first. The script makes the × work. |
| 2. Markup | Copy a recipe below. Put the banner at the top of the content. |
| 3. Choose | Status class, emphasis class (weak is the default), size (Small, or --large on My Pages) or Promotion. |
| 4. Close button | Leave out the × when the banner may not be closed. |
The markup has no motion. The closing animation is set in Motion on Examples & Guidelines.
| Class | Use |
|---|---|
banner-notification--{info|success|warning|error} | The status. |
banner-notification--{strong|weak|weaker} | The emphasis. |
banner-notification--large | Large (My Pages only). |
banner-notification--promotion and --{dark|light|accent-strong|accent-weak} | Promotion. |
| Name | Use |
|---|---|
--n-close-ease, --n-close-duration | Closing motion. Defaults: ease-accelerate-generic, duration-fast-3. |
data-n-close="fade" | On the banner or an ancestor: fade only, no height collapse. |
n-dismissed | Event, bubbles, fired when the banner is hidden. |
hidden.button.css is on the page.The component is one CSS file and one script, shared by every notification. Link them, never copy them. The code below is read from the files the page links, so it is always what you see.