Message
Interruptor
I'm an Interruptor
Interruptors are smaller than banners, but larger than alertboxes.
They're about drawing your attention to a CTA of some sort.
Example
<div styling="interruptor">
<h4>I'm an Interruptor</h4>
<p>Interruptors are smaller than banners, but larger than alertboxes.<br>
They're about drawing your attention to a CTA of some sort.</p>
<p><a styling="button small disabled">Button</a></p>
</div>
Alert Box
Did you mean the shop kitchensinks.co.uk?
×
Something you can probably ignore has happened.
×
Something bad has happened.
×
Something slightly worrying has happened.
×
Something good has happened.
×
Example
<div styling="alertbox">
Did you mean the shop <a href="">kitchensinks.co.uk</a>?
<a href="" class="close">×</a>
</div>
<div styling="alertbox alertbox-secondary">
Something you can probably ignore has happened.
<a href="" class="close">×</a>
</div>
<div styling="alertbox alertbox-negative">
Something bad has happened.
<a href="" class="close">×</a>
</div>
<div styling="alertbox alertbox-warning">
Something slightly worrying has happened.
<a href="" class="close">×</a>
</div>
<div styling="alertbox alertbox-positive">
Something good has happened.
<a href="" class="close">×</a>
</div>