include "include/header_production.html"
To style response messages you can use a combination between the response colors below and the core color schemes.
Information message box using the .info-bg color scheme. Link example
Notice message box using the .notice-bg color scheme. Link example
Success message box using the .success-bg color scheme. Link example
Warning message box using the .warning-bg color scheme. Link example
Error message box using the .error-bg color scheme. Link example
Information message box using the .info-bg color scheme. Link example
Notice message box using the .notice-bg color scheme. Link example
Success message box using the .success-bg color scheme. Link example
Warning message box using the .warning-bg color scheme. Link example
Error message box using the .error-bg color scheme. Link example
These are the core color schemes. Beside the response colors you can also use the included core color schemes to style response messages.
Information message box using the .bg-gray core color scheme. Link example
Notice message box using the .bg-blue core color scheme. Link example
Success message box using the .bg-green core color scheme. Link example
Alternate information message box using the .bg-white color scheme. Link example
Warning message box using the .bg-orange core color scheme. Link example
Error message box using the .bg-red core color scheme. Link example
Information message box using the .bg-gray core color scheme. Link example
Notice message box using the .bg-blue core color scheme. Link example
Success message box using the .bg-green core color scheme. Link example
Alternate information message box using the .bg-white color scheme. Link example
Warning message box using the .bg-orange core color scheme. Link example
Error message box using the .bg-red core color scheme. Link example
Information boxes beside the actual message paragraph can also have a title and an icon. Below you'll find examples with titles & text only.
Information message box using the .info-bg color scheme. Link example
Notice message box using the .notice-bg color scheme. Link example
Success message box using the .success-bg color scheme. Link example
Warning message box using the .warning-bg color scheme. Link example
Error message box using the .error-bg color scheme. Link example
Informations & stuff
Information message box using the .info-bg color scheme. Link example
Watch out for ...
Notice message box using the .notice-bg color scheme. Link example
All ok, that is great!
Success message box using the .success-bg color scheme. Link example
This is a warning!
Warning message box using the .warning-bg color scheme. Link example
Something went wrong!
Error message box using the .error-bg color scheme. Link example
You can use the core color schemes helpers to style the icons - background, color & size. The examples below use gradient color backgrounds for the icons.
Information message box using the .info-bg color scheme. Link example
Notice message box using the .notice-bg color scheme. Link example
Success message box using the .success-bg color scheme. Link example
Warning message box using the .warning-bg color scheme. Link example
Error message box using the .error-bg color scheme. Link example
Informations & stuff
Information message box using the .info-bg color scheme. Link example
Watch out for ...
Notice message box using the .notice-bg color scheme. Link example
All ok, that is great!
Success message box using the .success-bg color scheme. Link example
This is a warning!
Warning message box using the .warning-bg color scheme. Link example
Something went wrong!
Error message box using the .error-bg color scheme. Link example
If you prefer, you can remove from the information boxes icons the background color.
Information message box using the .info-bg color scheme. Link example
Notice message box using the .notice-bg color scheme. Link example
Success message box using the .success-bg color scheme. Link example
Warning message box using the .warning-bg color scheme. Link example
Error message box using the .error-bg color scheme. Link example
Informations & stuff
Information message box using the .info-bg color scheme. Link example
Watch out for ...
Notice message box using the .notice-bg color scheme. Link example
All ok, that is great!
Success message box using the .success-bg color scheme. Link example
This is a warning!
Warning message box using the .warning-bg color scheme. Link example
Something went wrong!
Error message box using the .error-bg color scheme. Link example
We set up an alternate style using the core color schemes and a different icons background color.
Information message box using the .bg-gray color scheme. Link example
Notice message box using the .bg-blue color scheme. Link example
Success message box using the .bg-green color scheme. Link example
Warning message box using the .bg-white color scheme. Link example
Warning message box using the .bg-orange color scheme. Link example
Error message box using the .bg-red color scheme. Link example
Informations & stuff
Information message box using the .bg-gray color scheme. Link example
Watch out for ...
Notice message box using the .bg-blue color scheme. Link example
All ok, that is great!
Success message box using the .bg-green color scheme. Link example
This is an alternate!
Warning message box using the .bg-white color scheme. Link example
This is a warning!
Warning message box using the .bg-orange color scheme. Link example
Something went wrong!
Error message box using the .bg-red color scheme. Link example
You have the option to add a little remove button that closes the respective information box.
include "include/footer.html"