o-topper

This component is used for styling the topper sections of an article.

• Usage
• Markup
• Sass
• Migration
• Contact
• Licence

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.