Origami Frontend Components & Services

Readme: o-teaser

This component is for displaying teasers which link through to articles.


Check out how to include Origami components in your project to get started with o-teaser.


Install the Origami build tools to build and run demos


The basic markup structure for a teaser will look something like this:

<div class="o-teaser o-teaser--small">
    <div class="o-teaser__content">
        <a href="#" class="o-teaser__tag">World</a>
        <h2 class="o-teaser__heading"><a href="#">Japan sells negative yield 10-year bonds</a></h2>
        <div class="o-teaser__timestamp">
            <time data-o-component="o-date" class="o-teaser__timestamp-date" datetime="2016-02-29T12:35:48Z">2016-02-29T12:35:48Z</time>

Optionally include the o-date component within your project to render a formatted date within the timestamp element o-teaser__timestamp. This is required to render relative timestamps e.g. "1hr ago".

Teasers support a wide array of elements and can be customised using several themes and should be used as required. For a full list of examples including example markup, see o-teaser in the Registry.


To add an image to a teaser, you should use the following markup structure:

<div class="o-teaser__image-container">
    <img src="{image-src}" class="o-teaser__image" alt="{alt text}"/>

To support lazy-loading of images you can use the o-teaser__image-placeholder element, as below:

<div class="o-teaser__image-container">
    <div class="o-teaser__image-placeholder">
        <img src="{image-src}" class="o-teaser__image" alt="{alt text}"/>

Supported elements

The following elements are supported by default:

.o-teaser__tag              # Small coloured tag at the top of the teaser
.o-teaser__tag-suffix       # Small coloured content to come after the tag, such as timestamp or duration
.o-teaser__tag-prefix       # A container for content before the tag
.o-teaser__heading          # Main heading of the teaser
.o-teaser__standfirst       # A short piece of content
.o-teaser__image-container  # Wrapper element for an image
.o-teaser__image            # An image for the teaser
.o-teaser__headshot         # Author's headshot image
.o-teaser__timestamp        # A styled timestamp for the teaser
.o-teaser__related          # A list of related content links
.o-teaser__related-item     # A single item of a related content list


To include styles for all teasers call oTeaser:

@import '@financial-times/o-teaser/main';

@include oTeaser();

Teasers are made up of various elements (e.g. heading, standfirst, timestamp) and a series of themes (e.g. small, large, video). Pass a list of elements and themes in an options $opts argument to include only the styles you need:

@include oTeaser($opts:(
    'elements': ('default', 'images'),
    'themes': ('small', 'large', 'video')

Elements are specified via groups, they include:

Themes include:


o-teaser has a selection of themes to help highlight content and provide a diverse layout. Themes are separated into 3 types of layout, each with their own modifiers to add different variations on the styles.

Small teasers

Uses the o-teaser--small modifier.

View example on the Registry

Additional modifiers:

Large teasers

Uses the o-teaser--large modifier.

View example on the Registry

Additional modifiers:

Hero teasers

Uses the o-teaser--hero modifier.

View example on the Registry

Additional modifiers:

Video teasers

Uses the o-teaser--video modifier.

View example on the Registry

Video teasers

Uses the o-teaser--audio modifier.

View example on the Registry

Migration guide

State Major Version Last Minor Release Migration guide
✨ active 6 N/A migrate to v6
⚠ maintained 5 5.2 migrate to v5
╳ deprecated 4 4.0 migrate to v4
╳ deprecated 3 3.5 migrate to v3
╳ deprecated 2 2.5 migrate to v2
╳ deprecated 1 1.9 -


If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #origami-support or email Origami Support.


This software is published by the Financial Times under the MIT licence.

Switch component view

GitHub: o-teaser@6.2.5

Install o-teaser

If using the Build Service, add o-teaser@^6.2.5 to your link tag.

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

Help & Support

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

Slack: #origami-support
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: #origami-support
Email: origami.support@ft.com