Origami Frontend Components & Services

Demos: n-alert-banner experimental

n-alert-banner is not maintained by the Origami team. While this component may be used, we make no guarantees about the support status, though we will help if we can.

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>
Switch component view

GitHub Repository

Install n-alert-banner

If using the Build Service, add n-alert-banner@^1.0.0 to your script and link tags.

If running a Manual Build, run bower install --save "n-alert-banner@^1.0.0".

Help & Support

n-alert-banner is not supported directly by the Origami team. We make no guarantees, but will help if we can. First try contacting its maintainers at:

Slack: #ft-next-conversion
Email: conversion.tech@ft.com