Standard Life Digital Framework

An alert box is a small box that appears on the display screen to give you information, this is sometimes referred to as a message box.

The alert box should be placed on the page where it is visible to the relevant information that is displayed.

Use any icon from the icons page ensuring it reflects the alert box purpose.

For dynamic alert boxes use transitions, use one of the transition utilities to either make the alert collapse, fade or bounce.

Accessible attribute	Description
`role="alertdialog"`	The alert dialog should be placed on the outer div of the alert to identify this element serves as an alert dialog container
`role="alert"`	The alert role should be placed on the outer div of the alert to identify this element serves as an alert notification
`aria-labelledby="IDREF"`	This gives the alert dialog an accessible name by referring to the element that provides the alert dialog title
`aria-describedby="IDREF"`	This gives the alert dialog an accessible description by referring to the alert dialog content that describes the primary message or purpose of the alert box
`aria-hidden="true"`	Tells assistive technologies that the windows underneath the current alert dialog are not available for interaction, when true the alert is displayed, otherwise false.

Modifier selector	Description
`slb-alert--blue`	Use blue alerts for primary information.
`slb-alert--grey`	Use grey alerts for secondary information.
`slb-alert--green`	Use green alerts for success information.
`slb-alert--red-solid`	Use red solid alerts for danger information.
`slb-alert--red`	Use red alerts for danger information.
`slb-alert--yellow`	Use yellow alerts for warning information.