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

Please check the latest version, 2.1.0, 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">
				<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">
				<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>
		</div>
	</div>
</div>

Marketing-secondary

Secondary marketing banner theme

<div class="o-banner o-banner--small o-banner--marketing-secondary" 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">
				<h1>You qualify for a 25% subscription discount.</h1>
				<p>Pay just &#xA3;3.99 per week for annual Standard &#x2028;Digital access.</p>
				<ul>
					<li>Access FT.com on your desktop, tablet &amp; mobile</li>
					<li>5 year company financials archive</li>
					<li>Personalised email briefings and market moving news</li>
				</ul>
			</div>
			<div class="o-banner__content o-banner__content--short">
				<p>
					<strong>You qualify for a 25% subscription discount.</strong>
					Pay just &#xA3;3.99 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 25% now</a>
				</div>
			</div>
		</div>
	</div>
</div>

Marketing-primary

Primary marketing banner theme

<div class="o-banner o-banner--small o-banner--marketing-primary" 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">
				<h1>You qualify for a 25% subscription discount.</h1>
				<p>Pay just &#xA3;3.99 per week for annual Standard &#x2028;Digital access.</p>
				<ul>
					<li>Access FT.com on your desktop, tablet &amp; mobile</li>
					<li>5 year company financials archive</li>
					<li>Personalised email briefings and market moving news</li>
				</ul>
			</div>
			<div class="o-banner__content o-banner__content--short">
				<p>
					<strong>You qualify for a 25% subscription discount.</strong>
					Pay just &#xA3;3.99 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 25% now</a>
				</div>
			</div>
		</div>
	</div>
</div>

Imperative

Imperative banner

<div class="demo-buttons">
	<button class="demo-button" id="banner-standard">Standard banner</button>
	<button class="demo-button" id="banner-small">Small banner</button>
	<button class="demo-button" id="banner-marketing-secondary">Secondary marketing banner</button>
	<button class="demo-button" id="banner-marketing-primary">Primary marketing banner</button>
</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 ^5.4.0
GitHub Repository

Quickstart

Build Service

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

o-banner@^1.1.2

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"@"^1.1.2"

For more information see the Origami build process.