Origami Frontend Components & Services

Readme: o-topper

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>
        <h1 class="o-topper__headline">
            Merkel reaches ‘grand coalition’ breakthrough with Social Democrats
        <div class="o-topper__standfirst">Move raises hopes of end to political deadlock that has gripped Germany since September</div>

    <div class="o-topper__background"></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.

Supported elements

Element Use case
.o-topper__content Main content area of topper. Required parent of all elements except __visual and __background.
.o-topper__tags Wrapper element for the article concept tag elements __brand, __topic and __opinion-genre.
.o-topper__brand A concept tag that represents a brand, e.g. "The Big Read".
.o-topper__topic A concept tag that represents a topic or generic concept.
.o-topper__opinion-genre A concept tag that represents the abstract Opinion genre.
.o-topper__columnist Wrapper element for __columnist-name. Should be placed below the headline and standfirst.
.o-topper__columnist-name Represents the columnist that wrote an Opinion genre article.
.o-topper__headline The main headline of the article.
.o-topper__standfirst A short introduction to the article.
.o-topper__background Element used to display the editorially-chosen colored background of the topper. Must be empty.
.o-topper__visual Wrapper for the visual elements __picture and __image. Should be a <figure> tag.
.o-topper__picture A <picture> tag visual element.
.o-topper__image An <img> tag visual element, usually used as fallback for a <picture>.
.o-topper__image-credit Element showing credit/copyright for the __picture or __image, where no image caption is given. If an image caption is provided alongside credit/copyright information use .o-topper__image-caption instead. Should be a <figcaption> tag.
.o-topper__image-caption Element showing caption and credit/copyright together for the __picture or __image. Should be a <figcaption> tag.


These themes affect the layout and visual style of all elements. See the demos for examples.



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.



To 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
    'elements': (
        'content', // .o-topper__content
        'visual', // .o-topper__visual
        'background', // .o-topper__background
    'colors': (
        'white', // .o-topper--color-white
        'black', // .o-topper--color-black


Mapping Content to Topper

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);


State Major Version Last Minor Release Migration guide
✨ active 5 N/A migrate to v5
⚠ maintained 4 4.0 migrate to v4
⚠ maintained 3 3.1 migrate to v3
╳ deprecated 2 2.7 migrate to v2
╳ deprecated 1 1.2 -


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.

Switch component view

GitHub: o-topper@5.7.1

Install o-topper

If using the Build Service, add o-topper@^5.7.1 to your script and link tags.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-topper@^5.7.1".

Help & Support

o-topper is maintained directly by the Origami team. If you have any questions about o-topper or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com