Origami Frontend Components & Services

Readme: o-teaser-collection

This component is for displaying collections of o-teasers.

Usage

Markup

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>
    </h2>

    <!-- Content goes here -->
</div>

Content for 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>
        <li class="o-teaser-collection__item">
            teaser goes here
        </li>
    </ol>
</div>

Teaser Collections can be customised using several themes, for a full list of examples including example markup, see o-teaser-collection in the Registry.

Sass:

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

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

Using Sass mixins

The o-teaser-collection styles are also available via Sass mixins. To include all styles for teaser collections, you can do:

@include oTeaserCollection;

By default the oTeaserCollection mixin includes both themes, to include a single theme or no themes you can pass an argument to the mixin:

@include oTeaserCollection('');
@include oTeaserCollection('numbered');

Themes

o-teaser-collection has two themes along with the standard collections styles.

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.

Migration guide

Upgrading from v1.x.x to v2.x.x

Deprecated v1 styles

The classname .o-teaser-collection--top-top-stories is deprecated and will be removed in v2, please use .o-teaser-collection--top-standalone instead.

The following styles are also deprecated and will be removed in v2:

.o-teaser-collection--stream .o-teaser__action {
    position: absolute;
    right: 0;
    top: 0;
}

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

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

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

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