An inline notification gives feedback right where the user is working: next to a form, a quantity field or a delivery estimate. It stays in the page until the user acts or the state changes. It never disappears by itself.
How to build an inline notification 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 and put it next to the thing it is about. |
| 3. Choose | Status class, emphasis class (weak is the default), and inline-notification--small for Small. |
| 4. Announce | Put it in a region with aria-live="polite" when it appears after an action. |
The markup has no motion. The closing animation is set in Motion on Examples & Guidelines.
| Class | Use |
|---|---|
inline-notification--{info|success|warning|error} | The status. |
inline-notification--{strong|weak} | The emphasis. |
inline-notification--small | Small. No Actionable layout. |
| Name | Use |
|---|---|
--n-close-ease, --n-close-duration | Closing motion. Defaults: ease-accelerate-generic, duration-fast-3. |
data-n-close="fade" | On the notification or an ancestor: fade only, no height collapse. |
n-dismissed | Event, bubbles, fired when the notification 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.