Use the viewport controls to check responsive behavior, then copy the implementation that fits your stack.
4 patterns
Information banner
Non-urgent contextual information with a visible text label.
informationnotice
Accessibility
Uses a note role because the information is useful but not urgent.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Success banner
A polite confirmation that communicates more than colour.
successstatus
Accessibility
The status role announces the confirmation politely.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Warning banner
A clear warning with an explanatory next step.
warningnotice
Accessibility
Warning meaning appears in text and symbol, not colour alone.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Error banner
An assertive error for a failed user-initiated operation.
erroralert
Accessibility
Alert is reserved for the important result of an immediate user action.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Implementation notes
These examples use plain CSS and no external dependencies. Replace sample content and destinations while preserving the semantic structure, labels, focus treatment and responsive behavior.