Alerts

Alerts provide feedback to the user in a more stylised manner than a body copy. The use colours and iconography to draw the users attention to messaging and supporting call to actions

Alerts Slim

These components are a lighter weight version of the main alert components but should be used when the alert is nested inside other content.

Usage

Should be used when the alert is nested inside smaller components such as form fields or nested cards

Styles and use cases are the same as the other alerts component

This component does not have borders

Icons are always displayed, they cannot be turned off

The spacing between the alert component and content should be 16px, so it is in close proximety to content it is associated with.

Styles

Alerts Styles

Top to Bottom: Information, Success, Error and Warning

Styles are the same as the main alerts component and should be used in the same manner. The styling of this component does not use borders, to have a more subtle appearance once nested. If text is longer than the containing space it will wrap on to a new line.

Example of text wrapping

Positioning

Alerts Positioning

Example of positioning slim alerts in a form