Origami Frontend Components & Services

Demos: o-banner

This version of o-banner hasn't been branded yet. Please check the latest version, 2.2.24, as branding is a relatively new addition to our components.

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.1.3 to your script and link tags.

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

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