Response Messages Response Messages are used to display notice, warning, success, error and information messages.

Basic

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

Core color schemes

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 .solid-gray core color scheme. Link example

Notice message box using the .solid-blue core color scheme. Link example

Success message box using the .solid-green core color scheme. Link example

Alternate information message box using the .solid-white color scheme. Link example

Warning message box using the .solid-orange core color scheme. Link example

Error message box using the .solid-red core color scheme. Link example

Titles

Information boxes beside the actual message paragraph can also have a title and an icon. Below you'll find examples with titles & text only.

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

Icons

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.

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

Transparent icons wrappers

If you prefer, you can remove from the information boxes icons the background color.

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

Alternate style

We set up an alternate style using the core color schemes and a different icons background color.

Informations & stuff

Information message box using the .solid-gray color scheme. Link example

Watch out for ...

Notice message box using the .solid-blue color scheme. Link example

All ok, that is great!

Success message box using the .solid-green color scheme. Link example

This is an alternate!

Warning message box using the .solid-white color scheme. Link example

This is a warning!

Warning message box using the .solid-orange color scheme. Link example

Something went wrong!

Error message box using the .solid-red color scheme. Link example

Close button

You have the option to add a little remove button that closes the respective information box.

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