Origami Frontend Components & Services

Demos: o-teaser-collection


Standard teaser collection

Linked Heading

Standard teaser collection with a linked heading. A linked heading may be applied to any teaser theme.

Responsive Heading (full-width on desktop)

The heading border is reduced in size responsively. This can be changed with modifier classes. See the readme for more options.

Inverse Heading

The heading colour may be inversed for use on a slate (or other dark) background.

Collection: horizontal

Teasers in horizontal rather than standard column layout

Collection: special

Collection: numbered and special

Collection: mid slice

Switch component view

GitHub: o-teaser-collection@4.2.2

Install o-teaser-collection

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

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

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