Origami Frontend Components & Services

Demos: o-banner

o-banner hasn't been branded yet, it only supports the master brand. If you would like to discuss having it branded please get in touch with the Origami team.

Banner

Basic banner

Small

Small banner theme

<div class="o-banner o-banner--small" data-o-component="o-banner">
	<div class="o-banner__outer">
		<div class="o-banner__inner" data-o-banner-inner="">
			<div class="o-banner__content o-banner__content--long">
				<header class="o-banner__heading">
					<h1>FT Compact</h1>
				</header>
				<p>Try the new compact homepage. A list view of today&apos;s homepage with fewer images.</p>
			</div>
			<div class="o-banner__content o-banner__content--short">
				<header class="o-banner__heading">
					<h1>FT Compact</h1>
				</header>
				<p>Try the new compact homepage.</p>
			</div>
			<div class="o-banner__actions">
				<div class="o-banner__action">
					<a href="#" class="o-banner__button">Try it now</a>
				</div>
				<div class="o-banner__action o-banner__action--secondary">
					<a href="#" class="o-banner__link">Give feedback</a>
				</div>
			</div>
		</div>
	</div>
</div>

Compact

Compact banner theme

<div class="o-banner o-banner--compact" data-o-component="o-banner">
	<div class="o-banner__outer">
		<div class="o-banner__inner" data-o-banner-inner="">
			<div class="o-banner__content">
				<header class="o-banner__heading">
					<h1>FT Compact</h1>
				</header>
				<p>Try the new compact homepage. A list view of today&apos;s homepage with fewer images.</p>
			</div>
			<div class="o-banner__actions">
				<div class="o-banner__action">
					<a href="#" class="o-banner__button">Try it now</a>
				</div>
				<div class="o-banner__action o-banner__action--secondary">
					<a href="#" class="o-banner__link">Give feedback</a>
				</div>
			</div>
		</div>
	</div>
</div>

Marketing

Marketing banner theme

<div class="o-banner o-banner--small o-banner--marketing" data-o-component="o-banner">
	<div class="o-banner__outer">
		<div class="o-banner__inner" data-o-banner-inner="">
			<div class="o-banner__content o-banner__content--long">
				<header class="o-banner__heading">
					<p>Limited time only</p>
					<h1>You qualify for a special offer: Save 33%</h1>
				</header>
				<p>Pay just $4.29 per week for annual Standard &#x2028;Digital access.</p>
				<ul>
					<li>Global news and opinion from experts in 50+ countries</li>
					<li>Access on desktop and mobile</li>
					<li>Market-moving news, politics, tech, the arts and more</li>
				</ul>
			</div>
			<div class="o-banner__content o-banner__content--short">
				<header class="o-banner__heading">
					<p>Limited time only</p>
					<h1>You qualify for a special offer: Save 33%</h1>
				</header>
				<p>Pay just $4.29 per week for annual Standard &#x2028;Digital access.</p>
			</div>
			<div class="o-banner__actions">
				<div class="o-banner__action">
					<a href="#" class="o-banner__button">Save 33% now</a>
				</div>
			</div>
		</div>
	</div>
</div>

Product

Product banner theme

<div class="o-banner o-banner--small o-banner--product" data-o-component="o-banner">
	<div class="o-banner__outer">
		<div class="o-banner__inner" data-o-banner-inner="">
			<div class="o-banner__content o-banner__content--long">
				<header class="o-banner__heading">
					<h1>FT Product Message</h1>
				</header>
				<p>This is an example product message.</p>
			</div>
			<div class="o-banner__content o-banner__content--short">
				<header class="o-banner__heading">
					<h1>FT Product Message</h1>
				</header>
				<p>This is an example product message.</p>
			</div>
			<div class="o-banner__actions">
				<div class="o-banner__action">
					<a href="#" class="o-banner__button">Try it now</a>
				</div>
				<div class="o-banner__action o-banner__action--secondary">
					<a href="#" class="o-banner__link">Give feedback</a>
				</div>
			</div>
		</div>
	</div>
</div>
Switch component view

GitHub Repository

Install o-banner

If using the Build Service, add o-banner@^2.3.0 to your script and link tags.

If running a Manual Build, run bower install --save "o-banner@^2.3.0".

Help & Support

o-banner is maintained directly by the Origami team. If you have any questions about o-banner or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com