Origami Frontend Components & Services

Readme: o-teaser

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

Usage

Markup

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-date" datetime="2016-02-29T12:35:48Z">2016-02-29T12:35:48Z</time>
        </div>
    </div>
</div>

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.

Images

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}"/>
</div>

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}"/>
    </div>
</div>

Supported elements

The following elements are supported by default:

.o-teaser__tag                         // Small coloured tag at the top of the teaser
.o-teaser__duration                    // Duration of the content (for video content)
.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

Sass:

As with all Origami components, o-teaser has a silent mode. To use its compiled CSS (rather than incorporating its mixins into your own Sass) set $o-teaser-is-silent : false; in your Sass before you import the o-teaser Sass:

$o-teaser-is-silent: false;
@import 'o-teaser/main';

Using Sass mixins

Teasers are made up of various elements (e.g. heading, standfirst, timestamp) and a series of themes (e.g. small, large, video). To get everything, use the oTeaser() mixin without arguments. To get only the stuff you need, you can pass in a list of elements and a list of themes:

oTeaser(('default', 'images'), ('small', 'large', 'video'));

The elements can be specified via groups:

Themes are configurable using the second argument of oTeaser and can be any combination of:

Themes

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

Migration guide

### Migrating from v1 to v2

V1 -> V2 introduces the new major of o-colors, o-labels, and o-typography. Updating to this new version will mean updating any other components that you have which are using any of the updated major versions. There are no other breaking changes in this release.

From o-card to o-teaser.

In most cases, migrating to o-teaser from o-card will be possible by simply replacing the o-card class prefix to o-teaser, i.e. o-card__heading becomes o-teaser__heading. However, there are some additional updates you will need to do, particularly around images and themes.

Images now require a containing element, with the o-teaser__image class on the <img> tag itself, see Images.

The landscape and standout themes have been removed, teasers are now responsive using o-grid and have a larger set of themes.


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.

Switch component view

GitHub Repository

Install o-teaser

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

If running a Manual Build, run bower install --save "o-teaser@^2.3.1".

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: #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