SGDS System Banner Component Skill

<sgds-system-banner> displays one or more <sgds-system-banner-item> messages that cycle automatically every 5 seconds. Use it for site-wide announcements, planned maintenance notices, or system status updates. It sits above <sgds-masthead> and <sgds-mainnav>.

Prerequisites

See sgds-components-setup for installation and framework integration (React 19+ vs React ≤18, Vue, Angular).

No CSS styling modifications — custom properties and CSS parts are not exposed on this component.

Quick Decision Guide

Show the banner? → Add show to <sgds-system-banner>

User can dismiss it? → Add dismissible

Full-width container? → Add fluid

Allow action text/button to not be clamped? → Add noClampAction