This component is for displaying header sections at the top of articles
Use of this component is not recommended outside FT.com / app.ft.com. The Javascript helper which currently extracts themes, colors, and other topper display data is deeply tied to the FT.com content store and includes hardcoded UUIDs and business logic. In future this will be moved into another layer of the FT.com stack, and the new configuration used to control topper display and functionality will be documented, at which stage this topper will be more suitable for wider use.
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
These 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-velvet
As with all Origami components, o-topper has a silent mode. To use its compiled CSS (rather than incorporating its mixins into your own Sass) set $o-topper-is-silent : false; in your Sass before you import the o-topper Sass:
$o-topper-is-silent: false;
@import 'o-topper/main';
@include oTopperElements;
.oTopperElements
mixin in _mixins.scss
. Rules for nesting the elements from the elements table should be followed for styles to work as expected.@include oTopperThemes;
.@include oTopperThemeName;
, e.g. @include oTopperThemeBranded;
, within a selector. For a list of themes see oTopperThemes
in _mixins.scss
.@include oTopperThemeElements;
.@include oTopperColors;
.background
and visual
descendents, use @include oTopperColor(%color);
, e.g. @include oTopperColor(claret);
, within a selector. For a list of colors see $_o-topper-colors
in _variables.scss
.This component includes a Javascript helper, which should be used to select the correct topper themes and colors, as well as other topper-overriden data, given a particular JSON-formatted FT article (such as from the Content API).
const {mapContentToTopper} = require('o-topper');
const topper = mapContentToTopper(ftArticle);
Data returned by the topper helper should be used in the product's templates. Other keys may be returned but should not be relied on as documented behaviour.
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.