This component is used for styling the topper sections of an article.
Check out how to include Origami components in your project to get started with o-topper.
The basic markup structure for a topper will look something like this:
<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 ‘grand coalition’ 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>Toppers support a wide array of elements and can be customised using several themes and background colors. For a full list of examples, including example markup, see o-topper in the Registry.
These themes affect the layout and visual style of all elements. See the demos for examples.
.o-topper--basic
.o-topper--branded
.o-topper--opinion
.o-topper--full-bleed-image-left
.o-topper--full-bleed-offset
.o-topper--split-text-left
.o-topper--split-text-center
.o-topper--deep-landscapeThese colors affect the background of the .o-topper__background and .o-topper__visual elements, and select a contrasting text color for all other elements. See o-colors for examples of the colors.
.o-topper--color-paper
.o-topper--color-wheat
.o-topper--color-white
.o-topper--color-black
.o-topper--color-claret
.o-topper--color-oxford
.o-topper--color-slate
.o-topper--color-crimson
.o-topper--color-sky
.o-topper--color-matisseTo include all o-topper CSS include oTopper:
@import '@financial-times/o-topper/main';
@include oTopper();To include o-topper styles granularly specify which elements, themes, and colours to output styles for using the options $opts argument:
@include oTopper($opts: (
'themes': (
'branded', // .o-topper--branded
'opinion', // .o-topper--opinion
'has-headshot', // .o-topper--has-headshot
'full-bleed-offset',
'split-text-left',
'split-text-center',
'full-bleed-image-center',
'full-bleed-image-left',
'package',
'package-extra',
'package-extra-wide',
'package-special-report',
'right-rail',
'centered',
'deep-landscape',
),
'elements': (
'content', // .o-topper__content
'visual', // .o-topper__visual
'background', // .o-topper__background
'headline',
'headline--large',
'summary',
'standfirst',
'summary--body',
'tags',
'columnist',
'columnist-name',
'brand',
'topic',
'read-next',
'image',
'image-credit',
'image-caption'
),
'colors': (
'white', // .o-topper--color-white
'black', // .o-topper--color-black
'claret',
'oxford',
'paper',
'slate',
'wheat',
'crimson',
'sky',
)
));This component exports a JavaScript helper from n-map-content-to-topper. Use this helper to select the correct topper for an article given a JSON-formatteed FT article and flags.
Note: This helper is deeply tied to the FT.com content store, and includes hardcoded UUIDs and business logic.
import { mapContentToTopper } from '@financial-times/o-topper';
const topper = mapContentToTopper(ftArticle, flags);If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #ft-origami or email Origami Support.
This software is published by the Financial Times under the MIT licence.