Code Blender

An atomic Middleman partials library

Alert

  2. Molecule
  3. Alert

Success Alert

Well done! You successfully read this important alert message. 
= codeBlender "alert", "molecule", { text: "Well done! You successfully read this important alert message." }

<div class='alert alert-success'>
Well done! You successfully read this important alert message.
</div>

Info Alert

Heads up! This alert needs your attention, but it's not super important. 
= codeBlender "alert", "molecule", { context: "info", text: "Heads up! This alert needs your attention, but it's not super important." }

<div class='alert alert-info'>
Heads up! This alert needs your attention, but it's not super important.
</div>

Warning Alert

Warning! Better check yourself, you're not looking too good. 
= codeBlender "alert", "molecule", { context: "warning", text: "Warning! Better check yourself, you're not looking too good." }

<div class='alert alert-warning'>
Warning! Better check yourself, you're not looking too good.
</div>

Danger Alert

Oh snap! Change a few things up and try submitting again. 
= codeBlender "alert", "molecule", { context: "danger", text: "Oh snap! Change a few things up and try submitting again." }

<div class='alert alert-danger'>
Oh snap! Change a few things up and try submitting again.
</div>

Dismissible Closable Alert, require JavaScript

Warning! Better check yourself, you're not looking too good. 
= codeBlender "alert", "molecule", { context: "warning", dismiss: true, text: "Warning! Better check yourself, you're not looking too good." }

<div class='alert alert-warning'>
<button aria-label='Close' class='btn btn-default close' data-dismiss='alert' type='button'>
&times;

</button>

Warning! Better check yourself, you're not looking too good.
</div>

Inline Links

Well done! You successfully Link read this important alert message. 
= codeBlender "alert", "molecule", { context: "success", text: "Well done! You successfully <a href='#' class='alert-link'>Link</a> read this important alert message." }

<div class='alert alert-success'>
Well done! You successfully <a href='#' class='alert-link'>Link</a> read this important alert message.
</div>

Resources Useful websites and tutorials

Title URL
Bootstrap Alerts http://getbootstrap.com/components/#alerts

Tasks

Task Date
Sort out the links in the Alerts using the alert-link class