UI Molecules

<div class="amui-m-alert alert is--success" role="alert">Well done! You successfully read this important alert message.</div>

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

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

<div class="amui-m-alert alert is--danger" role="alert">Oh snap! Change a few things up and try submitting again.</div>

<div class="amui-m-alert alert is--white" role="alert">Oh snap! Change a few things up and try submitting again.</div>

<div class="amui-m-alert alert is--success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>Well done! You successfully read this important alert message.</div>

<div class="amui-m-alert alert is--info alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>Heads up! This alert needs your attention, but it's not super important.</div>

<div class="amui-m-alert alert is--warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button><strong>Warning!</strong> Better check yourself, you're not looking too good.</div>

<div class="amui-m-alert alert is--danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>Oh snap! Change a few things up and try submitting again.</div>

<div class="amui-m-alert alert is--white alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>Oh snap! Change a few things up and try submitting again.</div>

<div class="amui-m-alert alert is--success" role="alert">
Well done! You successfully <a href="#" class="alert-link">read this important alert message.</a>
</div>

<div class="amui-m-alert alert is--info" role="alert">Heads up! This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.</div>

<div class="amui-m-alert alert is--warning" role="alert">Warning! Better check yourself, you're <a href="#" class="alert-link">not looking too good.</a></div>

<div class="amui-m-alert alert is--danger" role="alert">Oh snap! <a href="#" class="alert-link">Change a few things up</a> and try submitting again.</div>

<div class="amui-m-alert alert is--white" role="alert">Oh snap! <a href="#" class="alert-link">Change a few things up</a> and try submitting again.</div>