Inline notification
A short message that sits in the flow of the page, in one container: a yellow rule on pale yellow. A note adds context; an alert adds a status tag and asks for attention.
Note
A yellow rule on pale yellow. For context the reader should have before going on: a caveat, where something came from, what’s made up.
The real dashboard is private. The demo is built from the same code with a made-up household, so every name, account and figure in it is fictional.
Alert
The same container, led by a status tag. For something that needs action. The tag carries the level by weight, as in Tag · Status levels: the black box with yellow type is Critical.
Critical
July 2026 charges still not recorded for Alex
Warning
Savings goal is 12% behind for the quarter
Working
Importing September statements
Do
Keep it to one or two sentences, next to the thing it’s about.
Don’t
Stack several notes in a row, or use one for decoration.
Stipulations
- Full width of what it refers to. A notification spans the container it’s about, edge to edge: a section-wide alert spans the section, a note about one card spans that card. It lines up with the rules and content of that container, never a shorter box floating at the left.
- Square corners, no icons. Every notification is the
--highlightrule on--highlight-soft; only the tag changes with the level. - One notification per area. If there are several alerts, list them in one frame, most severe first.
- An alert gets
role="status"so screen readers announce it. - Links inside a note are underlined body links.
In use
| Site | Kind | Where |
|---|---|---|
| Docs | Note | Context on site pages, such as the Financial Dashboard demo caveat |
| Financial Dashboard | Alert | Missing charges and other items that need action |