o-topper
This component is used for styling the topper sections of an article.
Usage
Check out how to include Origami components in your project to get started with o-topper.
Markup
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.
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. |
Themes
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-landscape
.o-topper--deep-portrait
Colors
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-matisse
Modifiers
| Modifier | Use case |
|---|---|
.o-topper__content--background-box |
Create a background box around the element .o-topper__content. The background colour of the box |
| will be defined based on the background of the topper |
Sass
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
'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',
)
));Migration
| State | Major Version | Last Minor Release | Migration guide |
|---|---|---|---|
| ✨ active | 6 | N/A | migrate to v6 |
| ⚠ maintained | 5 | N/A | migrate to v5 |
| ╳ deprecated | 4 | 4.0 | migrate to v4 |
| ╳ deprecated | 3 | 3.1 | migrate to v3 |
| ╳ deprecated | 2 | 2.7 | migrate to v2 |
| ╳ deprecated | 1 | 1.2 | - |
Contact
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.
Licence
This software is published by the Financial Times under the MIT licence.