This component is experimental. This component is not guaranteed to be ready for production use, and the API should be considered unstable.

o-topper

Article header styling

experimental

Basic Article Topper

This is the default topper that all articles get

<div class="o-topper o-topper--basic o-topper--color-paper">
	<div class="o-topper__content">
		<div class="o-topper__tags">
			<a href="https://www.ft.com/german-election" class="o-topper__topic">German election</a>
		</div>
		<h1 class="o-topper__headline">
			Merkel reaches &#x2018;grand coalition&#x2019; breakthrough with Social Democrats
		</h1>
		<div class="o-topper__standfirst">Move raises hopes of end to political deadlock that has gripped Germany since September</div>
	</div>

	<div class="o-topper__background"></div>
</div>

Opinion Article Topper

This is used for articles with Opinion genre

<div class="o-topper o-topper--branded o-topper--has-headshot o-topper--opinion o-topper--color-sky">
	<div class="o-topper__content">
		<div class="o-topper__tags">
			<span class="o-topper__opinion-genre">
				Opinion
			</span>
			<a href="https://www.ft.com/topics/themes/US_Treasury_Bonds" class="o-topper__topic">
				US Treasury Bonds
			</a>
		</div>

		<h1 class="o-topper__headline">
			<span class="article-classifier__gap">Watch the bond market, not equities</span>
		</h1>

		<div class="o-topper__standfirst">Governments and leveraged borrowers would suffer if interest rates rise quickly</div>

		<div class="o-topper__columnist">
			<a class="o-topper__columnist-name" href="https://www.ft.com/gillian-tett">Gillian Tett</a>
		</div>

		<div class="o-topper__headshot">
			<img class="o-topper__headshot-image" src="https://www.ft.com/__origami/service/image/v2/images/raw/fthead-v1:gillian-tett?source=next&amp;fit=scale-down&amp;width=150&amp;compression=best&amp;quality=highest&amp;dpr=2" role="presentation">
		</div>
	</div>

	<div class="o-topper__background"></div>
</div>

Branded Article Topper

This is used for articles with a brandConcept

<div class="o-topper o-topper--branded o-topper--color-wheat">
	<div class="o-topper__content">
		<div class="o-topper__tags">
			<a href="https://www.ft.com/stream/c65ad97e-ccf0-4b6a-b34a-0e03744a9431" class="o-topper__brand">
				#techFT
			</a>
			<a href="https://www.ft.com/technology" class="o-topper__topic">Technology</a>
		</div>

		<h1 class="o-topper__headline" data-trackable="header">
			<span class="article-classifier__gap">Facebook&apos;s newsfeed revamp angers publishers (again)</span>
		</h1>

		<div class="o-topper__standfirst">AI&#x2019;s techmate, CES&#x2019;s slow-burning trends&#xA0;&#xA0;</div>
	</div>

	<div class="o-topper__background"></div>
</div>

Left-Aligned Full-Bleed Image Topper

This is a theme that editorial can choose, which comes through the API

<div class="o-topper o-topper--full-bleed-image-left">
	<div class="o-topper__content">
		<div class="o-topper__tags">
			<a href="https://www.ft.com/life-arts" class="o-topper__topic">Life &amp; Arts</a>
		</div>
		<h1 class="o-topper__headline o-topper__headline--large" data-trackable="header">
			<span class="article-classifier__gap">What makes a great surgeon? Two of Britain&#x2019;s best discuss</span>
		</h1>
		<div class="o-topper__standfirst">Henry Marsh and Stephen Westaby on &#x2018;100 per cent mortality&#x2019;, the embattled NHS and why self-deception is a clinical skill</div>
	</div>

	<div class="o-topper__background"></div>

	<figure class="o-topper__visual">
		<picture class="o-topper__picture">
			<source media="(max-width: 490px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/194b5a92-9486-11e7-a9e6-11d2f0ebb7f0?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=490 490w">
			<source media="(max-width: 1220px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/37f4c8fc-9486-11e7-a9e6-11d2f0ebb7f0?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1220 1220w">
			<source media="(min-width: 1220px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/13d2136c-9486-11e7-a9e6-11d2f0ebb7f0?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1440 1440w">
			<img alt="" class="o-topper__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/37f4c8fc-9486-11e7-a9e6-11d2f0ebb7f0?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1440">
		</picture>
	</figure>
</div>

Offset Full-Bleed Image Topper

This is a theme that editorial can choose, which comes through the API

<div class="o-topper o-topper--full-bleed-offset o-topper--color-paper">
	<div class="o-topper__content">
		<div class="o-topper__tags">
			<a href="https://www.ft.com/comment/the-big-read" class="o-topper__brand">
				The Big Read
			</a>
			<a href="https://www.ft.com/topics/people/George_Soros" class="o-topper__topic">
				George Soros
			</a>
		</div>
		<h1 class="o-topper__headline o-topper__headline--large">
			<span class="article-classifier__gap">George Soros fights back against populist foes</span>
		</h1>
		<div class="o-topper__standfirst">Once a symbol of the spread of democracy in Europe, the billionaire&#x2019;s foundation is now the target of resurgent nationalism</div>
	</div>

	<div class="o-topper__background"></div>

	<figure class="o-topper__visual">
		<picture class="o-topper__picture">
			<source media="(max-width: 490px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/42da357a-f78e-11e7-8715-e94187b3017e?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=490 490w">
			<source media="(max-width: 1220px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/05fff02c-f78e-11e7-8715-e94187b3017e?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1220 1220w">
			<source media="(min-width: 1220px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/402afdfa-f78e-11e7-8715-e94187b3017e?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1440 1440w">
			<img alt="" class="o-topper__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/05fff02c-f78e-11e7-8715-e94187b3017e?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=1440">
		</picture>
		<figcaption class="o-topper__image-credit">&#xA9; Bloomberg</figcaption>
	</figure>
</div>

Left-Aligned Split Text Topper

This is a theme that editorial can choose, which comes through the API. It also has a selection of background colours that can be chosen

<div class="o-topper o-topper--split-text-left o-topper--color-claret">
	<div class="o-topper__content">
		<div class="o-topper__tags">
			<a href="/uk-general-election" class="o-topper__topic">
				UK general election
			</a>
		</div>
		<h1 class="o-topper__headline o-topper__headline--large">
			<span class="article-classifier__gap">Canterbury tale: why a true blue corner of Britain turned to Labour</span>
		</h1>
		<div class="o-topper__standfirst">After a general election that redrew the political map, Sebastian Payne heads to a city at the heart of a historic upset in search of answers</div>
	</div>

	<div class="o-topper__background"></div>

	<figure class="o-topper__visual">
		<picture class="o-topper__picture">
			<source media="(max-width: 1440px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/3eceaf1e-61a3-11e7-91a7-502f7ee26895?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=720 720w">

			<source media="(min-width: 1440px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/6b7b8578-61a3-11e7-91a7-502f7ee26895?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=800 800w">

			<img alt="" class="o-topper__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/97a49d16-61e8-11e7-8814-0ac7eb84e5f1?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=800">
		</picture>
		<figcaption class="o-topper__image-credit">&#xA9; KMG/SWNS.com</figcaption>
	</figure>
</div>

Center-Aligned Split Text Topper

This is a theme that editorial can choose, which comes through the API. It also has a selection of background colours that can be chosen

<div class="o-topper o-topper--split-text-center o-topper--color-black">
	<div class="o-topper__content">
		<div class="o-topper__tags">
			<a href="https://www.ft.com/comment/the-big-read" class="o-topper__brand">
				The Big Read
			</a>
			<a href="https://www.ft.com/topics/themes/Renewable_Energy" class="o-topper__topic">
				Renewable Energy
			</a>
		</div>
		<h1 class="o-topper__headline o-topper__headline--large" data-trackable="header">
			<span class="article-classifier__gap">The Big Green Bang: how renewable energy became unstoppable</span>
		</h1>
		<div class="o-topper__standfirst">The shift to cleaner power is disrupting entire industries. Will the 21st century be the last one for fossil fuels?</div>
	</div>

	<div class="o-topper__background"></div>

	<figure class="o-topper__visual">
		<picture class="o-topper__picture">
			<source media="(max-width: 1440px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/87dd1db8-3ba5-11e7-821a-6027b8a20f23?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=720 720w">

			<source media="(min-width: 1440px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/6ddeb85e-3ba5-11e7-ac89-b01cc67cfeec?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=800 800w">

			<img alt="" class="o-topper__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/6ddeb85e-3ba5-11e7-ac89-b01cc67cfeec?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=800">
		</picture>

		<figcaption class="o-topper__image-credit">&#xA9; Ollanski</figcaption>
	</figure>
</div>

Package (Series) Landing Page Topper

Default theme for a Package/Series landing page, which has `type: package` in the API.

<div class="o-topper o-topper--split-text-left o-topper--package o-topper--color-wheat">
	<div class="o-topper__content">
		<div class="o-topper__tags">
			<a href="https://www.ft.com/ft-guides" class="o-topper__topic tags--large">FT Guides</a>
		</div>
		<h1 class="o-topper__headline o-topper__headline--large">
			<span class="article-classifier__gap">Collecting: Frieze Week 2017</span>
		</h1>
		<div class="o-topper__standfirst"><p>The arrival of Frieze London and Frieze Masters in Regent&#x2019;s Park kick-starts a week of art fairs and exhibition openings in the capital. Here&#x2019;s our guide to what&#x2019;s on</p></div>
	</div>

	<div class="o-topper__background"></div>

	<figure class="o-topper__visual">
		<picture class="o-topper__picture">
			<source media="(max-width: 1440px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/87c44eba-a823-11e7-ab55-27219df83c97?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=720 720w">
			<source media="(min-width: 1440px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/8c35d22a-a823-11e7-ab55-27219df83c97?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=800 800w">
			<img alt="" class="o-topper__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/aed45398-a99e-11e7-93c5-648314d2c72c?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=800">
		</picture>
	</figure>
</div>

Theme for Packages that editorial can choose, which comes through the API.

News Series Landing Page Topper

Used for the lead article in a Series, or a live event.

<div class="o-topper o-topper--news-package o-topper--color-wheat">
	<div class="o-topper__content">
		<h1 class="o-topper__headline" data-trackable="header">
			<span class="article-classifier__gap">Men Only: Inside the charity fundraiser where hostesses are put on show</span>
		</h1>
		<div class="o-topper__summary ">
			<p>A furore has erupted over a men-only fundraising dinner in London for the Presidents Club charity after an FT investigation revealed hostesses at the event were groped, sexually harassed and propositioned. Here is the FT coverage of the event and its aftermath</p>
		</div>
	</div>

	<div class="o-topper__background"></div>
		<figure class="o-topper__visual">
			<picture class="o-topper__picture">
				<source media="(max-width: 1440px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/cd815c94-0053-11e8-9650-9c0ad2d7c5b5?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=720 720w">


				<source media="(min-width: 1440px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/a25832ea-0053-11e8-9650-9c0ad2d7c5b5?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=800 800w">

			<img alt="" class="o-topper__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/a25832ea-0053-11e8-9650-9c0ad2d7c5b5?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=800">
		</picture>
		<figcaption class="o-topper__image-credit">&#xA9; Tolga Akmen/FT</figcaption>
	</figure>
</div>

Right hand rail Topper

Used where you only want content and a right-hand rail, no left-hand one

<div class="o-topper o-topper--right-rail o-topper--color-paper">
	<div class="o-topper__content">
		<div class="o-topper__tags">
			<a href="https://www.ft.com/german-election" class="o-topper__topic">German election</a>
		</div>
		<h1 class="o-topper__headline">
			Merkel reaches &#x2018;grand coalition&#x2019; breakthrough with Social Democrats
		</h1>
		<div class="o-topper__standfirst">Move raises hopes of end to political deadlock that has gripped Germany since September</div>
	</div>

	<div class="o-topper__background"></div>
</div>

Centered Topper

Used where you want a centered layout

<div class="o-topper o-topper--centered o-topper--color-paper">
	<div class="o-topper__content">
		<div class="o-topper__tags">
			<a href="https://www.ft.com/german-election" class="o-topper__topic">German election</a>
		</div>
		<h1 class="o-topper__headline">
			Merkel reaches &#x2018;grand coalition&#x2019; breakthrough with Social Democrats
		</h1>
		<div class="o-topper__standfirst">Move raises hopes of end to political deadlock that has gripped Germany since September</div>
	</div>

	<div class="o-topper__background"></div>
</div>
Bower Dependencies
o-typography ^5.4.2
o-grid ^4.3.7
o-colors ^4.1.5
o-icons ^5.6.0
GitHub Repository

Quickstart

Build Service

Add the following to your <link> tag

o-topper@^2.1.1

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-topper"@"^2.1.1"

For more information see the Origami build process.