Demos: n-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>

<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>

<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>

<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>