Dismissible page-level and inline notices across semantics, with page banners triggered on demand like an overlay.
Available components
Page banner (fixed overlay)
The page variant pins itself to the top of the viewport above all content — trigger one and scroll up if needed to see it. Only one shows at a time, matching the one-banner-per-page intent.
Page overlay (light)
Show info banner
Show warning banner
Show success banner
Page overlay (dark)
Show info banner
Show warning banner
Show success banner
Inline banner — semantics
Info (light)Extend session
Info (dark)Extend session
Warning (light)Update payment method
Warning (dark)Update payment method
Success (light)View consumption
Success (dark)View consumption
Inline banner — content edge cases
Headline only (no body, no link) (light)
Headline only (no body, no link) (dark)
Without link (headline + body) (light)
Without link (headline + body) (dark)
Without body (headline + link) (light)Read the updated terms
Without body (headline + link) (dark)Read the updated terms