Molecule
Banner
Something true about the whole screen. 54 instances across 44 screens, which makes it the third most widely spread component in the product.
The queue is stale, the connection is degraded, this case was already ruled on by somebody else. It is never about one row and never about one claim, and that is the whole of the rule for using it.
Anatomy
dark, shipped
light, the pair
.bannerthe notice, in its own boundary. It never covers anything: design principle 5 forbids an overlay that hides the evidence being decided onbthe fact, at weight 700. The sentence after it says what follows from the fact.saythe sentence. Required wherever there is an action, and it is not decoration: bare text beside abbecomes a separate anonymous flex item at every bold word, so without it the sentence breaks into pieces.actoptional. A banner offers an action only when there is one, and 34 of the 54 offer none
Variants
| Axis | Value | Uses | The rule |
|---|---|---|---|
| emphasis | .banner | 50 | it interrupts. A full edge and reading ink |
.banner--quiet | 4 | it reports. A hairline edge and secondary ink, for something the analyst should know and does not have to act on | |
| severity | no values | – | Prohibited, and the axis has only two values because a third would need a colour. The accent has four jobs and no fifth, and the severity ramp belongs to cases. A red banner would say the SCREEN has a severity, and screens do not |
A banner with no action is display:flow-root, and that is a bug fix rather than a preference. As a flex row it made a flex item of every element child, so a second b started its own line and the punctuation after it orphaned. Seen at 1440 at stage 07.
A banner WITH an action is two columns, and the float it replaced was the defect. A right floated action is placed on the line it happens to occur on, so the last lines of the sentence wrapped around it and the button ended up sitting inside the paragraph with a ragged hole beside it. On five screens it read as broken and on all five it was. The sentence holds its own measure on the left, the action stands clear on the right, and the pair stacks when the sentence can no longer hold its basis, so 360 needs no rule of its own. The action zone shrinks: on the reconnecting queue it carries the button and the sentence saying why there is nothing for it to do, and a zone that refused to shrink pushed 327px of it off the side of a phone.
When to use it
At the top of a zone, when something about the whole zone has changed: Clerk is down, the connection is reconnecting, this case has already been acted on. 20 of them sit in Z4 above the queue and 16 in the detail pane.
Where she meets it. On arrival, and it is the component that has to earn its interruption. Fifty four instances across forty four screens is close to the ceiling: one more reason to show a banner and the analyst starts reading past them.
Rule and anti-rule
Do
The fact, then what follows from it. The second half is the part that lets her keep working, and it is the half most notices leave out.
Do not
Not checked: the tenant baseline for the same window.
Not for something about one block. That is gnote, which sits under the block it qualifies and claims no boundary. A banner there would say the screen has a problem when one section has a gap.
Limits
Rules of composition and context, which no anti-rule can carry: nothing else is the right component to take, and what is wrong is the count or the neighbour. Counted on the grey corpus at stage 09, and every one of them is a function in design/kit/checks/rules.mjs. Full table with sources on Architecture.
- R8. A
.only-deskelement never renders at 360, and a.only-narrownever renders at the desk.
States
It has none, and it is not interactive.
dark, shipped
light, the pair
The button inside it is, and it carries its own. A banner is never dismissible: what it reports is either still true, in which case hiding it is a lie, or no longer true, in which case the screen removes it.
What it reads, and where it stands
| Role | Surface | Where on the component | Dark | Light |
|---|---|---|---|---|
--bg-page | fill | the ground, so it reads as raised off a surface and level with the page | ||
--text-primary | ink 4.5:1 | the fact | ||
--text-secondary | ink 4.5:1 | the quiet form | ||
--line-edge | line, exempt | the boundary, through --rule-edge | ||
--line-separator | line, exempt | the quiet boundary |