Origami Frontend Components & Services

Demos: o-teaser

Small

Small teaser

Small Live

Small live 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

Small Video

Small video teaser

Small Video Image

Small video teaser with image

Small Video Stacked

Small video teaser with stacked image

Small Audio

Small audio teaser

Small Audio Image

Small audio teaser with image

Small Audio Stacked

Small audio teaser with stacked image

Opinion

Opinion teaser with no image

Large

Large teaser default theme

Large Image

Large teaser default theme with image

Large Opinion

Large teaser opinion theme

Hero

Hero teaser default theme

Hero Highlight

Hero teaser highlight theme

Hero Opinion

Hero teaser opinion theme

Hero Centred

Hero teaser default theme centred

Hero Extra

Hero teaser extra theme centred

Hero teaser with featured image. On large viewports the teaser title overlays the image. On smaller viewports the typical hero teaser is shown, including themes such as opinion and highlight.

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

Partner Content (Paid Post)

Partner content

Promoted Content

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

Big Video Large

Large 'big video' teaser

Big Video Hero

Hero 'big video' teaser

Big Audio Large

Large 'big audio' teaser

Big Audio Hero

Hero 'big audio' teaser

Status
active
Switch component view

GitHub Repository

Install o-teaser

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

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-teaser@^6.0.3".

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