This component is not maintained by the Origami team. While this component may be used, it is not supported directly by the Origami team. We make no guarantees about the support status, though we will help you if we can.

n-alert-banner

Used for product messaging

experimental

Alert banner error

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>

Alert banner neutral

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>

Alert banner success

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>

Alert banner build

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>
Bower Dependencies
n-ui-foundations ^3.0.0
GitHub Repository

Quickstart

Build Service

Add the following to your <script> and <link> tags.

n-alert-banner@^1.0.0

How do I do that?

For more information see the Origami build service.

Manual Build Process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "n-alert-banner"@"^1.0.0"

For more information see the Origami build process.