Alerts
Alert info boxes for various scenarios. Whilst these contain opinionated styling they only posses the minimum of css to allow you to easier hook into and override those styles.
The dismiss functionality is added by a JavaScript plugin which comes with a markup API that allows running the plugin without writing a single line of JavaScript. This is Responsive's first class API and should be your first consideration when using a plugin.
Default
Alert block
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Phasellus vitae nibh justo. Integer a ligula vel enim ultricies mollis ut ac tortor.
Success
Add class .alert-success.
Success Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Phasellus vitae nibh justo. Integer a ligula vel enim ultricies mollis ut ac tortor.
Warning
Add class .alert-warning.
Warning Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Phasellus vitae nibh justo. Integer a ligula vel enim ultricies mollis ut ac tortor.
Error
Add class .alert-error.
Error Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Phasellus vitae nibh justo. Integer a ligula vel enim ultricies mollis ut ac tortor.
Info
Add class .alert-info.
Info Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Phasellus vitae nibh justo. Integer a ligula vel enim ultricies mollis ut ac tortor.
The Markup
<div class="alert">
<a data-dismiss-target=".alert" href="#" class="close">x</a>
<h4 class="alert-heading">Alert block</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Phasellus vitae nibh justo. Integer a ligula vel enim ultricies mollis ut ac tortor.</p>
</div>