shows an error alert banner
<div id="site-navigation">FT HEADER</div>
<div class="n-alert-banner n-alert-banner--error" data-n-component="n-alert-banner" data-n-alert-banner-attach-to-navigation="true" data-n-alert-banner-close-button="false">
<div class="n-alert-banner__outer">
<div class="n-alert-banner__inner" data-n-alert-banner-inner>
<div class="n-alert-banner__content n-alert-banner__content--long">
<p><b>Something went wrong!</b> Please check and try again.</p>
</div>
<div class="n-alert-banner__content n-alert-banner__content--short">
<p>Please check and try again.</p>
</div>
<div class="n-alert-banner__actions">
<div class="n-alert-banner__action">
<a href="#" class="n-alert-banner__button">Button</a>
</div>
<div class="n-alert-banner__action--secondary">
<a href="#" class="n-alert-banner__link">Text link</a>
</div>
</div>
</div>
</div>
</div>
shows a neutral alert banner
<div class="n-alert-banner n-alert-banner--neutral" data-n-component="n-alert-banner">
<div class="n-alert-banner__outer">
<div class="n-alert-banner__inner" data-n-alert-banner-inner>
<div class="n-alert-banner__content n-alert-banner__content--long">
<p><b>Good to know!</b> Keeping you informed a neutral thing happened.</p>
</div>
<div class="n-alert-banner__content n-alert-banner__content--short">
<p>Keeping you informed a neutral thing happened.</p>
</div>
<div class="n-alert-banner__actions">
<div class="n-alert-banner__action">
<a href="#" class="n-alert-banner__button">Button</a>
</div>
<div class="n-alert-banner__action--secondary">
<a href="#" class="n-alert-banner__link">Text link</a>
</div>
</div>
</div>
</div>
</div>
shows a success alert banner
<div class="n-alert-banner n-alert-banner--success" data-n-component="n-alert-banner">
<div class="n-alert-banner__outer">
<div class="n-alert-banner__inner" data-n-alert-banner-inner>
<div class="n-alert-banner__content n-alert-banner__content--long">
<p><b>Well done!</b> You successfully completed this task.</p>
</div>
<div class="n-alert-banner__content n-alert-banner__content--short">
<p>You successfully completed this task.</p>
</div>
<div class="n-alert-banner__actions">
<div class="n-alert-banner__action">
<a href="#" class="n-alert-banner__button">Button</a>
</div>
<div class="n-alert-banner__action--secondary">
<a href="#" class="n-alert-banner__link">Text link</a>
</div>
</div>
</div>
</div>
</div>
builds an alert banner
<div id="site-navigation" class="header">Dummy header to attatch items</div>
<div id="client-initialised-demo" class="buttons">
<button data-type="error">Error</button>
<button data-type="neutral">Netural</button>
<button data-type="success">Success</button>
<button data-type="marketing">Marketing</button>
</div>