Docs - Alert boxes

Connect alert-boxes.css to use alert boxes styles.

There are 5 alert box types:

• .pi-alert-note
• .pi-alert-info
• .pi-alert-success
• .pi-alert-danger
• .pi-alert-warning

<div class="pi-alert-info">
  <h4>Oh snap! You got an error!</h4>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa</p>
</div>

Alert box could be with close icon, add close button HTML and scripts/pi.alert.js script

<div class="pi-alert-info">
  <button type="button" class="pi-close" data-dismiss="alert"><i class="icon-cancel-5"></i></button>
  <h4>Oh snap! You got an error!</h4>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa</p>
</div>

Alert box could be with icon, and without, to use alert with icons add class .pi-alert-with-icon to main alert block.

<div class="pi-alert-note pi-alert-with-icon">
  <button type="button" class="pi-close" data-dismiss="alert"><i class="icon-cancel-5"></i></button>
  <h4>Oh snap! You got an error!</h4>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa</p>
</div>

Alert box could be with close animation effect. Connect animations.css, scripts/pi.detectTransition.js to enable alert close animation.

<div class="pi-alert-success pi-alert-with-icon fade in">
  <button type="button" class="pi-close" data-dismiss="alert"><i class="icon-cancel-5"></i></button>
  <h4>Oh snap! You got an error!</h4>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa</p>
</div>

<div class="pi-alert-info pi-alert-with-icon fade in">
  <button type="button" class="pi-close" data-dismiss="alert"><i class="icon-cancel-5"></i></button>
  <h4>Oh snap! You got an error!</h4>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa</p>
</div>

<div class="pi-alert-danger pi-alert-with-icon fade in">
  <button type="button" class="pi-close" data-dismiss="alert"><i class="icon-cancel-5"></i></button>
  <h4>Oh snap! You got an error!</h4>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa</p>
</div>

<div class="pi-alert-warning pi-alert-with-icon fade in">
  <button type="button" class="pi-close" data-dismiss="alert"><i class="icon-cancel-5"></i></button>
  <h4>Oh snap! You got an error!</h4>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa</p>
</div>