Presents important feedback or information to users either in response to their actions or upon page load.
Usage Guidelines
Simple confirmation acknowledgements that don’t require additional detail should just use a confirmation button. If an error occurs or additional information is needed to clarify then the appropriate alert style may be dynamically presented.
Features
When a message is displayed upon page load, for example if there was an error confirming an email address, the alert should appear statistically in the upper left corner of the page or if on a mobile device the message will appear in the center of the mobile devices screen. The location will make it noticeable even when the user screen is magnified.
This message can simply be closed by clicking on the close button or it will auto close the window upon time out.
The message should appear in the upper corner as part of the normal page load.
At responsive sizes the alert occupies the top part of the viewport.
Responsive popover alert.
Alerts can also appear dynamically in response to user actions like submitting a form, choosing an option, or completing an assignment. In this case the alert will animate down from the top.
The animation for showing/dismissing a dynamic alert.
The alert that applies to a specific task or section content will be displayed above or below where the action occurred.
The example of message appear below the content area.
Example of responsive version content level alert.
Popover alerts
Content(task) level alert
Initial version
Alerts