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.

Button

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>