Origami Frontend Components & Services

Demos: o-topper

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

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

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.

Special Report Package Landing Page Topper

Used for Special Reports, such as FT Wealth

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

Deep Portrait

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

Deep Landscape

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

Status
maintained
Switch component view

GitHub: o-topper@5.7.1

Install o-topper

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

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-topper@^5.7.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