o-colors CSS
FT brand colours: Sass variables and helpers to use and define them
3.6.0 Active
o-fonts CSS
Webfont loader for the FT's fonts.
2.2.0 Active
o-grid CSS JS
Grid for responsive layouts
4.3.1 Active
o-loading CSS
A visual loading indicator
1.0.0 Active
o-typography CSS
FT brand typographic styles
4.3.3 Active
o-visual-effects CSS
Sass mixins to use CSS visual effects
1.0.0 Active


g-audio CSS JS
IG audio player module
1.0.1 Experimental
n-sliding-popup CSS JS
Component description
1.0.4 Experimental
o-ads CSS JS
6.1.3 Active
o-aside-panel CSS
Content panels
2.0.3 Active
o-author-alerts CSS JS
Alerts widget used for Author Alerts
4.2.1 Experimental
o-big-number CSS JS
A pull-quote-esque component that highlights large numbers
1.1.4 Experimental
o-business-card CSS
Render contact information about a FT employee
1.0.4 Deprecated
o-buttons CSS
Buttons module
4.5.4 Active
o-card CSS
Card view of any kind of content
2.2.4 Active
o-comments CSS JS
Commenting for FT content. Integrated with FT authentication and user data services.
3.4.7 Active
o-cookie-message CSS JS
Cookie message banner which ensures sites comply with the EU cookie law
2.2.5 Active
o-email-only-signup CSS JS
Next FT - light sign-up
5.0.1 Active
o-footer CSS JS
Responsive Financial Times page footer
5.4.0 Active
o-forms CSS
These components are used as the building blocks for creating all types of forms. These forms should be able to be used on all devices ie desktop, mobile and tablet.
3.5.0 Active
o-ft-affiliate-ribbon CSS
FT affiliation ribbon for Specialist Titles
1.0.1 Active
o-gallery CSS JS
Slideshow gallery component
2.1.1 Active
o-header CSS JS
Responsive Financial Times page header
6.14.1 Active
o-header--theme-ic CSS JS
The Investors Chronicle header. This component is a theme for o-header.
1.0.1 Deprecated
o-header-services CSS JS
Responsive page header for minimally branded sites, eg B2B tools, documentation sites, and internal tools.
1.2.1 Active
o-hierarchical-nav CSS JS
Responsive hierarchical nav
4.1.3 Active
o-labels CSS
Label styling
2.1.0 Active
o-overlay CSS JS
Responsive, configurable overlays that support modal and non-modal centered overlays and overlays with arrows
1.16.1 Active
o-promobox CSS
Styling for boxes that promote the contents of themselves
1.3.8 Deprecated
o-quote CSS
Styling for blockquotes, pull-quotes and any other types of quote
1.3.2 Active
o-section-head CSS JS
A section heading to sit between the Financial Times header and the page content, indicating a section
1.0.5 Deprecated
o-share CSS JS
Share module
3.2.2 Active
o-squishy-list JS
A horizontal list of elements that 'squishes' down, lowest priority first.
2.3.0 Active
o-table CSS JS
FT-branded tables
5.2.1 Active
o-tabs CSS JS
Tabs component for dividing content into meaningful sections.
3.0.0 Active
o-teaser CSS
Teasers which link through to articles
1.11.2 Active
o-teaser-collection CSS
A collection of article teasers.
1.1.1 Active
o-tooltip CSS JS
Component description
1.1.0 Active
o-tracking JS
Module for tracking FT
1.2.3 Active
o-video CSS JS
Financial Times video component
2.4.7 Active


o-techdocs CSS JS
A framework for building technical documentation and tool UIs
6.1.3 Active


ftdomdelegate JS
Create and manage a DOM event delegator
2.1.0 Active
o-ads-embed JS
Facilitate communication between advertising creatives in iframes and the main o-ads library via post message
2.3.1 Active
o-assets CSS JS
Static assets path generator
3.0.2 Active
o-autoinit JS
Auto-initalisation event emitter
1.2.1 Active
o-comment-count JS
Renders the comment count for a given article.
0.3.3 Active
o-date JS
Utility for formatting and updating dates
2.8.0 Active
o-dom JS
DOM manipulation and traversal helpers
2.0.2 Active
o-element-visibility JS
Utility for moderating listeners for browser events on window
2.1.4 Active
o-errors JS
Library for reporting front end errors
3.5.1 Active
o-expander CSS JS
Accessible, content-aware widget for expanding and collapsing content
4.3.0 Active
o-fetch-jsonp JS
Fetch API helper tool that fallbacks to JSONP
2.0.2 Active
Web font files
1.3.2 Active
o-hoverable CSS JS
Common class and supporting JavaScript for enabling and disabling hover effects
3.1.0 Active
o-icons CSS
Helper Sass for using the FT's icons. For a full list of available icons please see the fticons image set(
5.3.0 Active
o-in-page-nav CSS JS
Navigation for page contents
1.0.0-beta.4 Active
o-layers JS
Namespace for managing modules that make use of the z-axis
2.0.3 Active
o-normalise CSS JS
Foundation styles and standardised utilities
1.2.1 Active
o-toggle JS
Accessible show/hide behaviour
1.1.6 Active
o-utils JS
JS helper functions
1.0.2 Active
o-viewport JS
Utility for moderating listeners for browser events on window
3.1.0 Active


Financial Times icons
1.7.1 Active
Headshots of FT Journalists
1.20.1 Active
Logos used in FT products
1.3.4 Active
Images for FT Brands
1.0.3 Active
Logos for Specialist Titles
1.0.5 Active
Social media icons, with the correct brand colours.
2.1.2 Active


n-barriers CSS
Next FT - barriers
1.22.4 Experimental
n-message-prompts CSS JS
Next FT - message prompts client
3.1.0 Experimental
n-notification CSS JS
Next FT - onsite notification bar
5.0.5 Experimental
o-chat CSS JS
A chat-style commenting component. Integrated with FT authentication and user data services.
3.0.2 Active
o-comment-api JS
An abstraction of FT's commenting APIs, used by o-comments and o-chat
2.4.0 Active
o-comment-ui CSS JS
Shared UI components used by o-comments and o-chat.
3.2.1 Active
o-comment-utilities JS
A collection of helper functions used by o-comments and o-chat.
2.3.0 Active
o-cookies JS
Utility for getting and setting cookies, including read/write of individual values within compound FT cookies
1.1.1 Deprecated
o-crossword CSS JS
FT-branded crosswords
1.0.0 Experimental
o-ft-buttons CSS
Buttons module
1.7.7 Deprecated
o-ft-footer CSS
Responsive Financial Times page footer
2.0.6 Deprecated
o-ft-forms CSS
Forms module
0.13.4 Deprecated
o-ft-icons CSS
Financial Times icons
3.5.2 Deprecated
o-ft-typography CSS
FT brand typographic styles
1.16.1 Deprecated
o-link-list CSS
Styles for lists of links
1.0.5 Experimental
o-test-component CSS
1.0.19 Deprecated
o-three-sixty CSS JS
Display 360 degree panoramic media from brightcove
1.0.0 Experimental
o-tweet CSS
Styles and markup for embedding tweets
1.0.0 Deprecated
o-useragent CSS JS
Mechanism to target style rules at only specific user agents, allowing browser-specific bugs to be fixed. Also includes convenience methods for dealing with vendor prefixed CSS and JavaScript properties.
2.2.1 Deprecated
Polyfill Service
3.17.0 Active

Updates to the library

Every 4 hours, the library automatically scans the FT and FT Labs public GitHub accounts, and Stash, for repositories containing an Origami configuration file. To publish a new component and make it available on the Origami component library, push it to one of these Git locations, and ensure it is correctly set up with the appropriate Origami config.

Last scan: .

Registry API

The Origami components library provides a read-only API conforming to the Bower Registry API spec (excluding registration and publishing). To specify the Origami components library as your source for Bower components, create a .bowerrc file in your home directory or the root of your project's working tree, with the following content:

  "registry": {
    "search": [