Origami Frontend Components & Services

Readme: o-teaser-collection

This component is for displaying collections of o-teasers.


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


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

<div class="o-teaser-collection">
    <h2 class="o-teaser-collection__heading">
        <a class="o-teaser-collection__heading-link" href="#">UK</a>

    <!-- Teasers go here -->

Teaser collections can be arranged using o-grid, or by using the o-teaser-collection__items and o-teaser-collection__item classes. These classes are designed to work on list elements, as seen in the o-teaser-collection--numbered example:

<div class="o-teaser-collection o-teaser-collection--numbered">
    <h2 class="o-teaser-collection__heading o-teaser-collection__heading--full-width">Most read</h2>
    <ol class="o-teaser-collection__items">
        <li class="o-teaser-collection__item">
            teaser goes here
        <li class="o-teaser-collection__item">
            teaser goes here

Teaser Collections can be customised using several modifier classes.


To include all styles call the oTeaserCollection mixin.

@include oTeaserCollection();


o-teaser-collection css may be included granularly by passing options to the oTeaserCollection mixin.

@include oTeaserCollection($opts: (
    'collections': ('special'), // o-teaser-collection--special
    'headings': ('inverse'), // o-teaser-collection__heading--inverse
    'items': ('stretched') // o-teaser-collection__item--stretched

Options include:

Key Possible Values Classes Output
collections 'horizontal', 'special', 'numbered', 'big-story', 'assassination', 'assassination-related', 'mid-slice', 'stream', 'top-standalone' o-teaser-collection--[option]. Apply to o-teaser-collection, e.g. class="o-teaser-collection o-teaser-collection--horizontal"
headings 'inverse', 'full-width', 'half-width', 'small' o-teaser-collection__heading--[option]. Apply to o-teaser-collection__heading, e.g. class="o-teaser-collection__heading o-teaser-collection__heading--inverse"
items 'stretched' o-teaser-collection__item--[option]. Apply to o-teaser-collection__item, e.g. o-teaser-collection__item o-teaser-collection__item--stretched

Use o-teaser-collection--numbered to number the list of teasers in the collection, see an example in the registry.

Use o-teaser-collection--special to add a darker background across the full width of the containing relative element, see an example in the registry.


To include heading styles output o-teaser-collection__heading classes using the oTeaserCollection mixin as described above. If your component or project would like to replicate only some parts of the heading style use oTeaserCollectionContentHeading.

For example, to replicate only the basic heading style pass an empty map:

.my-heading {
    @include oTeaserCollectionContentHeading($opts: ());

To replicate the header fully, but without the size modifiers such as o-teaser-collection__heading--full-width:

.my-heading {
    @include oTeaserCollectionContentHeading($opts: (
        'anchor': true, // Include child anchor styles `.my-heading > a`
        'divider': true, // Include the top border styles.
        'sizes': () // Do not output size modifiers such as `.my-heading--small`.

oTeaserCollectionContentHeading options include:

Key Possible Values Description
anchor Boolean Output styles for a nested anchor tag, for a collection heading with a link.
divider Boolean Output styles for a divider (border) above the collection heading.
sizes 'inverse', 'full-width', 'half-width', 'small' Output modifier classes for different sizes headings e.g. my-heading--small.

Migration guide

State Major Version Last Minor Release Migration guide
✨ active 4 N/A migrate to v4
⚠ maintained 3 3.0 migrate to v3
╳ deprecated 2 2.3 migrate to v2
╳ deprecated 1 1.2 N/A


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-collection@4.2.3

Install o-teaser-collection

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

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

Help & Support

o-teaser-collection is maintained directly by the Origami team. If you have any questions about o-teaser-collection 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