Messages

Defines styles for info, success, warning and error messages.

Usage

To apply this component, add the .message class to a block element.


Close button

To apply a close button, add the .message-close class to a <button> or <a> element inside the message box. To enable the JavaScript for the close button, just add the data-message attribute to the message box. We recommend adding the .close class from the Close component to give the button a proper styling, though you can also use text or an image.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Color modifiers

There are several color modifiers available. Just add one of the following classes to apply a different look.

Example

To indicate info message add the .message-info class.

To indicate success or a positive message add the .message-success class.

To indicate a message containing a warning add the .message-warning class.

To indicate an important message add the .message-danger class.

Size modifier

Add the .message-large class to increase the spacing in an message box. This can be useful, if you want to use richer typography.

Example

Today's headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.