Messages
Messages, or message boxes, can be used to highlight important or informative notifications to the user. They are often used at the top of a form to inform the user about the issues that occurred while processing the form data provided. There are several message levels, ordered by severity. The described CSS classes can be added to any element. It should be a block element though and it is encouraged to use the classes only on <div>
or <p>
elements.
The icon needs to be included in the markup manually, so you have total freedom about whether or not and which icon from which source (graphics, font) to use. When using an icon, the additional icon
CSS class must be applied to provide some space at the left side.
A critical message has the highest severity and is defined with the critical
CSS class.
This is a critical message. Something really, really bad has happened. You better go take care of it right now. More information.
An error message has the second-highest severity and is defined with the error
CSS class.
This is an error message. Something hasn't quite worked but we could still handle it. You should take a look though. More information.
A warning message is defined with the warning
CSS class.
This is a warning message. Something wasn't as expected but might still be okay anyway. More information.
An information message is defined with the information
CSS class.
This is an information message. Just so you know. Sed malesuada ac erat vitae scelerisque. Cras rhoncus erat nec leo vehicula iaculis. Integer molestie felis quis justo laoreet faucibus. Quisque ornare molestie imperdiet. Suspendisse vel imperdiet erat. Phasellus vel posuere enim. Maecenas sagittis nec lectus id sollicitudin. Donec sit amet tortor neque. More information.
A success message is defined with the success
CSS class.
This is a success message. Congratulations, everything went fine! More information.
Closable messages
Messages can be closed by adding the closable
CSS class to them.