This version of this component hasn't been branded yet.

Please check the latest version, 2.1.3, as branding is a relatively new addition to our components.

o-banner

Used for product messaging

active

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 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>
Bower Dependencies
o-colors ^4.1.1
o-grid ^4.3.3
o-typography ^5.2.0
o-buttons ^5.1.0
o-icons >=4.0.0 <6
o-visual-effects ^2.0.3
GitHub Repository

Quickstart

Build Service

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

o-banner@^2.1.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 "o-banner"@"^2.1.0"

For more information see the Origami build process.