o-teaser

CSS

o-teaser represents article content. It helps readers to decide if the content is relevant to them and showcases the breadth of FT content. It always links to an article.

Elements of n-teaser

Teasers can make use of a defined range of elements. The logic of when an element is included into the teaser is defined by its collection, page type, breakpoint and by its own logic (e.g. timestamp). The headline is the only mandatory element.

  • Tags
  • Labels
  • Headline (mandatory)
  • Standfirst
  • Image
  • Timestamp
View on GitHub

Quick start

Using the build service

Add the following token to your link tag (how do I do that?):

o-teaser@^1.12.2

For more information see the Origami build service.

Using a manual build process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-teaser"@"^1.12.2"

For more information see the Origami build process.

small


			

Small teaser

small-full-fat


			

Small (full-fat) teaser

small-image


			

Small teaser with image

small-image-right


			

Small teaser with image positioned to the right

small-image-stacked


			

Small teaser with stacked image

opinion


			

Opinion teaser with no image

video


			

Video teaser with duration

large


			

Large teaser default theme

large-image


			

Large teaser default theme with image

large-opinion


			

Large teaser opinion theme

large-video


			

Large video teaser with duration

hero


			

Hero teaser default theme

hero-highlight


			

Hero teaser highlight theme

hero-opinion


			

Hero teaser opinion theme

hero-video


			

Hero video teaser with duration

hero-centred


			

Hero teaser default theme centred

hero-extra


			

Hero teaser extra theme centred

hero-image


			

Hero image teaser

hero-stretched


			

Hero teaser default theme stretched

top-story-hero


			

Top story teaser hero standalone theme

top-story-standalone


			

Top story teaser standalone theme

top-story-landscape


			

Top story teaser landscape theme

top-story-big-story


			

Top story teaser big story theme

inverse


			

Top story teaser big story theme

paid-post


			

Paid Post teaser

promoted-content


			

Small teaser for content by external advertisers

basic-package-teaser


			

Package teaser without List basic theme

basic-package-teaser-list


			

Package teaser with list basic theme

special-report-package-teaser


			

Special Report Package teaser without List

special-report-package-teaser-list


			

Special Report Package teaser with list

extra-package-teaser


			

Package teaser without List extra theme

extra-package-teaser-list


			

Package teaser with list extra theme

Component information

Latest stable version:
1.13.0 (1 day, 1 hour old)
Status (Learn more):
Active (as of 1.12.2)
Bundle sizes:
1,181b JavaScript 33.74KB CSS
This version
1.12.2 (1 month, 6 days old)
Support status (Learn more):
Active (as of 1.12.2)
Last indexed
26 May 2017 10:52:59 (Build now)
Installable?
OK
Dependencies
o-colors ^3.5.2 Out of date 4.0.1
o-grid ^4.2.3 OK 4.3.1
o-hoverable >=2.0.0 <4 OK 3.1.0
o-icons >=4.4.2 <6 OK 5.3.0
o-labels ^2.1.0 Out of date 3.0.0
o-typography ^4.3.1 Out of date 5.0.1
Dependents
n-teasero-teaser-collection

Contact

To talk to the team you can contact the Origami team on Slack channel #ft-origami or directly by email at origami-support@ft.com

Report an issue

Origami