Origami Frontend Components & Services

The Origami Registry is being decommissioned by the end of March 2024 and replaced with Storybook. For more information please read our blog post.

Please share any feedback in our #origami-chat Slack channel.

Demos: o-topper

o-topper has a support status of "experimental". This means that the component's API may change without notice, and there is no guarantee that the component is ready for production use.

Basic Article Topper

This is the default topper that all articles get

Opinion Article Topper

This is used for articles with Opinion genre

Branded Article Topper

This is used for articles with a brandConcept

Left-Aligned Full-Bleed Image Topper

This is a theme that editorial can choose, which comes through the API

Offset Full-Bleed Image Topper

This is a theme that editorial can choose, which comes through the API

Left-Aligned Split Text Topper

This is a theme that editorial can choose, which comes through the API. It also has a selection of background colours that can be chosen

Center-Aligned Split Text Topper

This is a theme that editorial can choose, which comes through the API. It also has a selection of background colours that can be chosen

Package (Series) Landing Page Topper

Default theme for a Package/Series landing page, which has `type: package` in the API.

Theme for Packages that editorial can choose, which comes through the API.

News Series Landing Page Topper

Used for the lead article in a Series, or a live event.

Right hand rail Topper

Used where you only want content and a right-hand rail, no left-hand one

Centered Topper

Used where you want a centered layout

Status
experimental Origami v1 (Bower)
Switch component view

GitHub: o-topper

Install o-topper

If using the Build Service, add o-topper@^2.2.1 to your script and link tags.

If using the Bower package manager for a Manual Build, run bower install --save "o-topper@^2.2.1".

Help & Support

o-topper is maintained directly by the Origami team. If you have any questions about o-topper 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