Origami Frontend Components & Services

Readme: o-teaser

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

Development

Install the Origami build tools to build and run demos

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__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

Sass

To include styles for all teasers call oTeaser:

@import '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:

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

Video teasers

Uses the o-teaser--audio modifier.

View example on the Registry

Migration

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

Contact

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.


Licence

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

Support Status
active
Switch component view

GitHub Repository

Install o-teaser

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

If running a Manual Build, run bower install --save "o-teaser@^5.1.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: #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