Origami Frontend Components & Services

Demos: o-banner

This version of o-banner hasn't been branded yet. Please check the latest version, 3.4.2, 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>

Custom Theme

This demo shows a custom banner theme created using o-banner Sass. It's used to show customisation is possible, not that this style is recommended. Currently Build Service users are not able to create a custom theme. See the README for more details.

Custom Call To Action Layout

Although not recommended for design consistency, banner actions may be disabled entirely to further customise the layout of a banner within the banner content. See the README for more details.

Support Status
active
Switch component view

GitHub Repository

Install o-banner

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

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

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: #origami-support
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: #origami-support
Email: origami.support@ft.com