Components · Notifications

Banner

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.

Tokens, sizes, measurements, states and requirements. Values come from the live token package and from Banner.

Design Tokens

Resolved from the live token package. {status} is information, success, warning or danger (Error).

Emphasis

Emphasis	Background	Left edge	Text	Shadow
Strong	`surface-{status}-default`	`surface-{status}-weaker`	`text-primary-inverted`	Large only
Weak	`surface-{status}-weaker`	`surface-{status}-default`	`text-primary`	Large only
Weaker	`surface-raised-primary`	`surface-{status}-default`	`text-primary`	Always (`elevation-b-20`)

Tokens

Emphasis	Part	Token	Value

Sizes

Property	Desktop (769px+)	Tablet (640–768px)	Mobile (below 640px)
Small height	48px min	40px min	40px min
Small padding	12px / 16px	8px / 16px	8px / 16px
Small text	14/20, 0.36px; title 14px, 0.56px	12/18, 0.24px; title 12px, 0.48px	12/18; title 12px
Large left edge	8px	4px	4px
Large icon	48px	40px	24px
Large padding	24px	16px	12px, 12px, 16px (top, sides, bottom)
Large gap icon to text	12px	12px	8px
Large heading / body	20/24 / 17/24	18/22 / 16/22	18/22 / 16/22
Large action indent	60px	52px	32px
Promotion height	48px	40px	32px
Width	100% of the container	100%	100%

Promotion on tablet keeps the mobile layout (title left, link and × right); the Figma heights are 48px desktop and 32px mobile.

Measurements

Dimensions

The padding of a Small and a Large banner. The shaded area is the padding; the status edge sits outside it. The numbers are read from the component.

A Small and a Large banner. Change the Breakpoint to see the tablet and mobile values.

Attribute	Desktop (769px+)	Tablet (640–768px)	Mobile (below 640px)
Small padding	12px above and below, 16px sides	8px above and below, 16px sides	same as tablet
Large padding	24px	16px	12px, 12px, 16px (top, sides, bottom)
Large left edge	8px	4px	4px
Large gap icon to text	12px	12px	8px
Large space above the actions	24px	24px	24px
Promotion padding	12px above and below, 48px sides	4px above and below, 8px sides	same as tablet

Spacing

The same distances as spacing tokens.

Part	Value
Small padding, desktop	`space-12` and `space-16`
Small padding, mobile	`space-8` and `space-16`
Large padding, desktop	`space-24`
Large padding, tablet	`space-16`
Large padding, mobile	`space-12` and `space-16`
Icon to text	`space-8` (Large: `space-12` from 640px)
Left edge, Small	`space-2`

Elevation

Part	Token	Value
Every banner	`shadow-elevation-b-20`	Small, Large and Promotion, all emphasis levels. Set once on `.banner-notification`.

States

Each status in three emphasis levels. A banner has no hover or focus state of its own; only the × and its links do. Choose the level by how much the user must notice it: see Choosing the emphasis.

Status	Strong	Weak	Weaker

Typography

Element	Token	Mobile and tablet	Desktop (769px+)
Small title	`label-sm`, bold, uppercase	12/12, 0.48px	14/14, 0.56px
Small text	`body-sm`	12/18, 0.24px	14/20, 0.36px
Inline link, Small	Small Bold	14/20	14/20
Large heading	`title-md`	18/22, bold	20/24, bold
Large body	`body-md`	16/22, 0.32px	17/24, 0.32px
Promotion title	`label-md`	14/16, 0.42px	18/18, 0.18px
Promotion link	`body-sm` / `body-md`	14/16, 0.36px	17/24, 0.32px

Structure

Elements

Element	Class	Notes
Banner	`banner-notification banner-notification--{status} banner-notification--{emphasis}`	Emphasis: `strong`, `weak`, `weaker`. Add `--large` for Large.
Small	`__base`, `__left-border`, `__container`, `__inner`, `__content`	Edge, container, text row.
Icon, title, text	`__icon`, `__title`, `__text`	The icon is a `material-symbols-outlined` span.
Inline link	`__links`	Small: between the text and the ×.
Large	`__main`, `__textblock`, `__heading`, `__body`, `__footer`, `__btns`	Icon, heading, body, actions.
Promotion	`banner-notification--promotion banner-notification--{dark\|light\|accent-strong\|accent-weak}`	No status. `__promo` holds the title and the link.
Close	`icon-btn icon-btn--close`	Add `icon-btn--close-inverted` on Strong and Dark.

Types

Kind	Emphasis	Statuses
Small	Strong, Weak, Weaker	Informational, Success, Warning, Error
Large (My Pages only)	Strong, Weak, Weaker	Informational, Success, Warning, Error
Promotion	Dark, Light, Strong (accent), Weak (accent)	None

Width

Always 100% of the container.

Motion

Property	Token	Value
Close: `opacity`, `height`, margin and padding	`--n-close-duration`	Default `duration-fast-3` (150ms)
Easing	`--n-close-ease`	Default `ease-accelerate-generic`
Height collapse	`data-n-close="fade"` on an ancestor turns it off	On by default

Reduced motion: the banner is hidden at once. Slow durations (450ms or more) and decelerate easings are wrong for an exit. Compare values in the live Motion section on Examples & Guidelines.

Behavior

Input	Result
Click ×	Hides the banner. Whether the × exists is decided by the banner’s owner.
Persistence	A banner never disappears by itself. It stays until it is closed or the state changes.
Tab	The ×, buttons and links take focus with a visible ring.
Inline link	Underlined when enabled; on hover the underline goes and the color changes (`eco-inline-link`, Medium; inverted on Strong and Promotion Dark). Brand-accent Promotion keeps its text color on hover.
Order	Place the banner at the top of the content in the DOM so screen reader users meet it first.

Accessibility Requirements

Topic	Requirement
Markup	A Strong or Error banner for an outage should use `role="alert"`; other banners need no role.
Status	The icon and the text carry the status, not the color alone (WCAG 1.4.1).
Focus	The ×, buttons and links have a 2px ring, `border-focus`, on keyboard use (WCAG 2.4.7).
Contrast	Strong uses white text on the solid status color; Weak and Weaker use `text-primary`.
Reduced motion	The banner is hidden without a transition under `prefers-reduced-motion: reduce`.