Banner
A message about the whole app, across the top of every page while it's true. Specification: docs/components/banner.md
Basics
A <div class="canon-banner"> first in what holds the app, before the App Shell: a title, a description beside it, actions and a close button at the end. canon.js keeps it in view: it sticks to the top, and the shell's sidebar and Top Bar stick under it. Scroll the frame to try it; dismiss it and the shell moves back up.
Dashboard
Intents
data-intent tints the strip and gives it its icon, whose word screen readers hear first ("Warning: Maintenance tonight"). With none it's plain news.
Emphasis
data-emphasis="high" fills it, for the banner that must not be missed: a state that changes what everything in the app does. These have no close button: they stay while the state does.
Several
Banners stack, the most important first, each sticking under the one before. Two at most. A close button only on news that can be put away; canon.js names it, fires a cancelable canon-dismiss and hides the banner. Remembering that across pages is the app's.
Edge cases
Right to left, the icon is on the right and the actions on the left. In a narrow window the description goes under the title, then the actions under it.