System banner¶
The system banner is a prominent message displayed at the top of the screen to communicate system-wide updates, status changes, or information about the environment.
Usage¶
The system banner is placed above the a application header to highlight important system-wide messages. It supports various status types, including "information," "warning," "caution," "danger," and "critical."
When to use¶
- To inform users about critical updates or changes.
- To notify users of any errors or issues.
- To provide important notifications, such as maintenance schedules or security alerts.
Best practices¶
- Keep messages brief and easy to understand.
- Use clear, simple language. Avoid jargon and technical terms.
- Limit system banners to essential information to prevent clutter.
- Display system banners only when relevant to the user's context.
Design¶
Elements¶
- Background, 2. Text message
Variants¶
Code¶
Usage¶
import { SiSystemBannerComponent } from '@siemens/element-ng/system-banner';
@Component({
imports: [SiSystemBannerComponent, ...]
})
<si-system-banner message="This is an information" [status]="'info'"/>
Displaying a system banner above the application header¶
To display a system banner above the application header, the following CSS classes must be applied:
- add
has-system-banner
on wrapperdiv
which also containshas-application-header
orhas-navbar-fixed-top
- add
fixed-top
onsi-system-banner
System banner with different statuses¶
Except where otherwise noted, content on this site is licensed under MIT License.