o-teaser

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

• Usage
• Development
• Markup
• Sass
• Migration guide
• Contact
• Licence

Usage

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

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

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.

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

• default - all basic text elements, including: heading, standfirst, meta, and tag.
• images - all image element styles
• promoted - promoted by and paid post element styles
• related-items - styling for the related items elements
• timestamp - styles for the timestamp and live post styles

Themes include:

• small - styling for small teasers
• large - styling for large teasers
• standard - outputs the opinion and inverse themes
• video - outputs the video teaser styles
• audio - outputs the audio teaser styles
• top-stories - outputs all top stories teaser styles and variations
• hero - outputs all hero teaser styles and variations

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.

Additional modifiers:

• stacked: moves the image to the top of the teaser
• opinion: changes the tag colour to blue
• live: change background to red and position of elements to make the teaser stand out
• post: set liveblog post styles

Large teasers

Uses the o-teaser--large modifier.

Additional modifiers:

• opinion: adds a blue background
• highlight: adds a claret background

Hero teasers

Uses the o-teaser--hero modifier.

View example on Storybook

Additional modifiers:

• centred: centres the image and text
• opinion: adds a blue background
• highlight: adds a claret background
• stretched: makes the teaser take up the full height of the available space and anchors the standout and timestamp content to the bottom of the teaser.

Video teasers

Uses the o-teaser--video modifier.

View example on Storybook

Video teasers

Uses the o-teaser--audio modifier.

Migration guide

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.