# Alert An Alert informs the user of a significant or time-sensitive message without interrupting their task. ## Guidelines - Use an Alert if the message’s purpose matches one of the following: - **Information** to bring attention to a message. This variation is blue and it is the default. - **Success** to reassure that a process is complete. This variation is green. - **Warning** when action is needed to prevent damage. This variation is orange. - **Error** indicates an error has occurred. This variation is red. - Place the Alert in a Grid Cell to create enough white space around it. - Important and urgent information is to be placed directly below the Page Header. Examples: system outage or changes in the opening hours of a City Office. This can be applied to the entire website or to a part of it. - Add a close button if the user should be able to dismiss the Alert.