Alert
Error!
Major alert. Click here
Warning!
Something's up. Click here
Success!
You successfully did something. Click here
Attention!
This alert needs your attention. Click here
<!-- ERROR -->
<div class="alert alert--condensed alert--error" role="alert" aria-describedby="alertdescription1" aria-live="assertive">
<div class="alert__body">
<h3 class="alert__title">Error</h3>
<p class="alert__text" id="alertdescription1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque error perferendis eveniet laborum, a iure ex odio asperiores eos placeat.</p>
</div>
</div>
<!-- WARNING -->
<div class="alert alert--condensed alert--warning" role="alert" aria-describedby="alertdescription2" aria-live="assertive">
<div class="alert__body">
<h3 class="alert__title">Warning</h3>
<p class="alert__text" id="alertdescription2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque error perferendis eveniet laborum, a iure ex odio asperiores eos placeat.</p>
</div>
</div>
<!-- SUCCESS -->
<div class="alert alert--condensed alert--success" role="alert" aria-describedby="alertdescription3" aria-live="polite">
<div class="alert__body">
<h3 class="alert__title">Success</h3>
<p class="alert__text" id="alertdescription3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque error perferendis eveniet laborum, a iure ex odio asperiores eos placeat.</p>
</div>
</div>
<!-- INFORMATIVE -->
<div class="alert alert--condensed alert--info" role="alert" aria-describedby="alertdescription4" aria-live="polite">
<div class="alert__body">
<h3 class="alert__title">Attention</h3>
<p class="alert__text" id="alertdescription4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque error perferendis eveniet laborum, a iure ex odio asperiores eos placeat.</p>
</div>
</div>With a description
Be brief in your description text, one paragraph should be more than enough to get your feedback across to the user.
Error
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque error perferendis eveniet laborum, a iure ex odio asperiores eos placeat.
Warning
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque error perferendis eveniet laborum, a iure ex odio asperiores eos placeat.
Success
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque error perferendis eveniet laborum, a iure ex odio asperiores eos placeat.
Attention
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque error perferendis eveniet laborum, a iure ex odio asperiores eos placeat.
<!-- ERROR -->
<div class="alert alert--error" role="alert" aria-describedby="alertdescription1" aria-live="assertive">
<div class="alert__body">
<h3 class="alert__title">Error</h3>
<p class="alert__text" id="alertdescription1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque error perferendis eveniet laborum, a iure ex odio asperiores eos placeat.</p>
</div>
</div>
<!-- WARNING -->
<div class="alert alert--warning" role="alert" aria-describedby="alertdescription2" aria-live="assertive">
<div class="alert__body">
<h3 class="alert__title">Warning</h3>
<p class="alert__text" id="alertdescription2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque error perferendis eveniet laborum, a iure ex odio asperiores eos placeat.</p>
</div>
</div>
<!-- SUCCESS -->
<div class="alert alert--success" role="alert" aria-describedby="alertdescription3" aria-live="polite">
<div class="alert__body">
<h3 class="alert__title">Success</h3>
<p class="alert__text" id="alertdescription3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque error perferendis eveniet laborum, a iure ex odio asperiores eos placeat.</p>
</div>
</div>
<!-- INFORMATIVE -->
<div class="alert alert--info" role="alert" aria-describedby="alertdescription4" aria-live="polite">
<div class="alert__body">
<h3 class="alert__title">Attention</h3>
<p class="alert__text" id="alertdescription4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque error perferendis eveniet laborum, a iure ex odio asperiores eos placeat.</p>
</div>
</div>Dismissible alerts
You can click these alerts away. You need to write your own Javascript to make it work (for now)!
Error!
Major alert. Click here
Error!
Major alert. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, nesciunt?. Click here
<div class="alert alert--condensed alert--dismissible alert--error" role="alert" aria-describedby="alertdescription1" aria-live="assertive">
<div class="alert__body">
<h3 class="alert__title">Error!</h3>
<p class="alert__text" id="alertdescription1">Major alert. <a href="#">Click here</a></p>
</div>
<button class="alert__dismiss" type="button">×<span class="sr-only">Close</span></button>
</div>
<div class="alert alert--dismissible alert--error" role="alert" aria-describedby="alertdescription1" aria-live="assertive">
<div class="alert__body">
<h3 class="alert__title">Error!</h3>
<p class="alert__text" id="alertdescription1">Major alert. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, nesciunt?. <a href="#">Click here</a></p>
</div>
<button class="alert__dismiss" type="button">×<span class="sr-only">Close</span></button>
</div>