Basic banner
<div class="o-banner" 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'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 class="o-banner__action o-banner__action--secondary">
<a href="#" class="o-banner__link">Give feedback</a>
</div>
</div>
</div>
</div>
</div>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'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 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'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 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 
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 
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 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>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.
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.