Alert

Defines styles for success, warning and error messages.


Usage

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

Usage

  • Class Description
    .alert Defines the base structural style for an alert.

    Sub Objects

    Class Description
    .alert-close While no CSS is applied to this element, this class is necessary to identifiy the element which will dismiss the alert.

    Modifiers

    Class Description
    .alert-success Applies the "success" color pallete to an alert.
    .alert-warning Applies the "warning" color pallete to an alert.
    .alert-danger Applies the "danger" color pallete to an alert.
    .alert-large Increases the padding of an alert and spaces the .close element if necessary.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
  • <div class="alert" data-alert>
        <a href="#" class="alert-close close"></a>
            ...
    </div>

Sub Objects

To apply a close button, add the .alert-close class to a <button> or <a> element inside the alert box. To enable the JavaScript for the close button, just add the [data-alert] attribute to the alert 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.

Usage

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
  • <div class="alert" data-alert>
        <a href="#" class="alert-close close"></a>
            ...
    </div>

Modifiers

Color Modifiers

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

Usage

  • Success! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
    Warning! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
    Danger! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
  • <div class="alert alert-success" data-alert>
        <a href="#" class="alert-close close"></a>
            ...
    </div>
    
    <div class="alert alert-warning" data-alert>
        <a href="#" class="alert-close close"></a>
            ...
    </div>
    
    <div class="alert alert-danger" data-alert>
        <a href="#" class="alert-close close"></a>
            ...
    </div>

Size Modifiers

Add the .alert-large class to increase the spacing in an alert box.

Usage

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
  • <div class="alert alert-large" data-alert>
        <a href="#" class="alert-close close"></a>
            ...
    </div>