Alert

<div class="k-alert k-alert--success">
    <button type="button" class="k-alert__close k-js-alert-close" title="Close" aria-label="Close">Close</button>
    You successfully read this important alert message.
</div>
<div class="k-alert k-alert--info">
    <button type="button" class="k-alert__close k-js-alert-close" title="Close" aria-label="Close">Close</button>
    This alert needs your attention, but it's not super important.
</div>
<div class="k-alert k-alert--warning">
    <button type="button" class="k-alert__close k-js-alert-close" title="Close" aria-label="Close">Close</button>
    Better check yourself, you're not looking too good.
</div>
<div class="k-alert k-alert--danger">
    <button type="button" class="k-alert__close k-js-alert-close" title="Close" aria-label="Close">Close</button>
    Change a few things up and try submitting again.
</div>

<div class="k-alert k-alert--success k-alert--overflow">
    <button type="button" class="k-alert__close k-js-alert-close" title="Close" aria-label="Close">Close</button>
    <p><strong>Well done!</strong> You successfully read this important alert message.</p>
    <p>Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.</p>
    <p>Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.</p>
    <p>Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.</p>
    <p>Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.</p>
</div>

<div class="k-alert k-alert--success">
    <button type="button" class="k-alert__close k-js-alert-close" title="Close" aria-label="Close">Close</button>
    <p><strong>Well done!</strong> You successfully read this important alert message.</p>
</div>
<!-- Purely for demonstational purposes -->
<button class="k-button k-button--default" id="make-fixed" type="button">Toggle alert position</button>
<script data-inline>
    document.querySelector('#make-fixed').onclick = function() {
        this.parentNode.querySelector('.k-alert').classList.toggle('k-alert--fixed');
    };
</script>