o-topper

Basic Article Topper

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

Offset Full-Bleed Image Topper

<divclass="o-topper o-topper--full-bleed-offset o-topper--color-paper"><divclass="o-topper__content"><divclass="o-topper__tags"><ahref="https://www.ft.com/comment/the-big-read"class="o-topper__brand">
The Big Read
</a><ahref="https://www.ft.com/topics/people/George_Soros"class="o-topper__topic">
George Soros
</a></div><h1class="o-topper__headline o-topper__headline--large"><spanclass="article-classifier__gap">George Soros fights back against populist foes</span></h1><divclass="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><divclass="o-topper__background"></div><figureclass="o-topper__visual"><pictureclass="o-topper__picture"><sourcemedia="(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"><sourcemedia="(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"><sourcemedia="(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"><imgalt=""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><figcaptionclass="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

<divclass="o-topper o-topper--split-text-left o-topper--color-claret"><divclass="o-topper__content"><divclass="o-topper__tags"><ahref="/uk-general-election"class="o-topper__topic">
UK general election
</a></div><h1class="o-topper__headline o-topper__headline--large"><spanclass="article-classifier__gap">Canterbury tale: why a true blue corner of Britain turned to Labour</span></h1><divclass="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><divclass="o-topper__background"></div><figureclass="o-topper__visual"><pictureclass="o-topper__picture"><sourcemedia="(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"><sourcemedia="(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"><imgalt=""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><figcaptionclass="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

<divclass="o-topper o-topper--split-text-center o-topper--color-black"><divclass="o-topper__content"><divclass="o-topper__tags"><ahref="https://www.ft.com/comment/the-big-read"class="o-topper__brand">
The Big Read
</a><ahref="https://www.ft.com/topics/themes/Renewable_Energy"class="o-topper__topic">
Renewable Energy
</a></div><h1class="o-topper__headline o-topper__headline--large"data-trackable="header"><spanclass="article-classifier__gap">The Big Green Bang: how renewable energy became unstoppable</span></h1><divclass="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><divclass="o-topper__background"></div><figureclass="o-topper__visual"><pictureclass="o-topper__picture"><sourcemedia="(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"><sourcemedia="(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"><imgalt=""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><figcaptionclass="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.

Featured Package Landing Page Topper

<divclass="o-topper o-topper--split-text-left o-topper--package o-topper--package-extra o-topper--color-slate"><divclass="o-topper__content"><divclass="o-topper__tags"><ahref="https://www.ft.com/ft-series"class="o-topper__topic tags--large">FT Series</a></div><h1class="o-topper__headline o-topper__headline--large"data-trackable="header"><spanclass="article-classifier__gap">The Election Outsider</span></h1><divclass="o-topper__standfirst"><p>American Joshua Chaffin has left London and gone on a tour of the UK looking for a deeper perspective on the election</p></div></div><divclass="o-topper__background"></div><figureclass="o-topper__visual"><pictureclass="o-topper__picture"><sourcemedia="(max-width: 1440px)"srcset="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/4fe8c9c0-36f5-11e7-bce4-9023f8c0fd2e?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=720 720w"><sourcemedia="(min-width: 1440px)"srcset="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/1e786f9e-36f5-11e7-99bd-13beb0903fa3?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=800 800w"><imgalt=""class="o-topper__image"src="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/1e786f9e-36f5-11e7-99bd-13beb0903fa3?source=next&amp;fit=scale-down&amp;quality=highest&amp;width=800"></picture><figcaptionclass="o-topper__image-credit">&#xA9; FT montage</figcaption></figure></div>

News Series Landing Page Topper

<divclass="o-topper o-topper--news-package o-topper--color-wheat"><divclass="o-topper__content"><h1class="o-topper__headline"data-trackable="header"><spanclass="article-classifier__gap">Men Only: Inside the charity fundraiser where hostesses are put on show</span></h1><divclass="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><divclass="o-topper__background"></div><figureclass="o-topper__visual"><pictureclass="o-topper__picture"><sourcemedia="(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"><sourcemedia="(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"><imgalt=""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><figcaptionclass="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

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

Centered Topper

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