# Page banners

Page banners: a free component, built on your design tokens, to use for news about the whole page or account that should stay until it's handled or dismissed. Four banners for the top of a page or section (info, success, warning and error), each with a bold first phrase, one sentence and one action.

Prompt: Add the OpenDesigner component page-banners to this project: https://opendesigner.dev/library/page-banners.html. Keep its markup and states; map its --ds-* variables to my tokens.

States: info, success, warning, error, dismissed, hover, focus.

Accessibility: Info, success and warning are polite status regions; the error is an alert and can't be dismissed until it's fixed; dismiss buttons are named after their banner, and focus moves to the next banner.

File: https://opendesigner.dev/library/page-banners.html

Catalog entry (parts, data limits, states, tokens): https://opendesigner.dev/library/page-banners.json

Download: `curl -fsSLo page-banners.html https://opendesigner.dev/library/page-banners.html`