Enables advertising from Google's DFP Ad server, and provides customised demographic, and contextual (via Admantx) targeting.
Facilitate communication between advertising creatives in iframes and the main o-ads library via post message
Provides a standard way of firing the 'o.DOMContentLoaded' events if/when the equivalent browser-native events fire, to auto initialise other components that are in use.
Provides styling for product messaging which could include feature promotion, education, feedback, and legal information.
Typographical styles to highlight a big number.
Tools to "brand" other Origami components.
FT buttons styles. Provides customisation options with the FT colour palette.
The default colour palette for all FT products. The palette supports colour contrast checking, colour mixing and toneing.
Shared UI components used by o-comments and o-chat.
A component, integrated with FT authentication and user data services, to add a comment stream or comment count to content.
The cookie message and behaviour approved by the FT's legal team. All FT websites must have a cookie message. Using o-cookie-message will ensure your site is compliant according to EU regulatory law.
Typography styles for editorial content.
A decoupled events-based mechanism for components to report errors and an API for products to report client-side errors.
Content-aware helper for expanding and collapsing content or lists.
Loads CSS declarations for FT web fonts. Does not include font assets.
Web font files
Responsive footer for all FT.com pages. Includes legally approved links.
This is a legally approved footer component for internal products, tooling and customer products
This component provides responsive styling for form fields and inputs. It provides validation and error handling for forms, as well.
A ribbon denoting affiliation with the FT. This ribbon should be used in products that are owned by the Financial Times but have a separate brand identity to the company.
FT's dom delegate library is a component for creating and binding to events on all target elements matching the given selector.
Provides a comprehensive icon set for FT products
A configurable content gallery. For carousels, slideshows and thumbnail strips.
A 12 column responsive, flexbox-based grid system for laying out documents, templates and components.
Responsive Financial Times page header with primary and secondary navigation, a drop down mega menu, and a collapsible drawer
Responsive page header for sites with minimal or customised branding, including internal products, customer facing tools, and specialist titles.
Helper SCSS tool for using the FT's icons. For a full list of available icons please see the fticons image set
Labels for content classification or to emphasise a value. Provides customisation options with the FT colour palette.
Namespace for managing modules that make use of the z-axis
Provides page layouts and typography as a starting point to create internal tools or products.
Provides lazy loading functionality for images, pictures, iframes, and more. It is powered by the Intersection Observer API to detect when the visibility of elements changes.
A visual loading indicator, available in two colours and four sizes
Logos for FT products, including the official FT logo and logos for internal products
Provides message elements for alerting, informing or making calls to action.
Provides customization for meter tag
Provides base styles and resets for stylesheets. Includes standardised utilities, such as visually hiding components or adding a consistent focus state.
A collection of images for FT brands, such as blogs or specific sections
A collection of official, vectorised international flags
A collection of logos used by Specialist Titles, such as Investors Chronicle, Non-executive Directors' Club.
Configurable custom overlay box that can be used to show overlay windows. The overlays can also be switched to display differently on small screens
Styling for blockquotes, pull-quotes and any other types of quote
Provides styling for social media sharing links
Icons for social media.
Maintain consistent spaces across components and projects in accordance to our baseline grid and design guidelines.
Track progress through a multi-step process, such as a form
A card for showing different subscription packages offered by the Financial Times
A syntax highlighter for Origami-supported documentation that wraps PrismJs
Provides styling and behvaiour for tables across FT products.
Tabs component for dividing content into meaningful sections.
Provides styling for teaser elements, which contain information about an article and link through to it
Provides styles to layout out multiple teasers in one section.
Utility that provides toggle (show/hide) behaviour to a <button> or <a> tag and a target.
Provides a viewport-aware tooltip for annotating or or highlighting other aspects of a product's UI
Provides tracking for a product. Tracking requests are sent to the Spoor API.
Typographical styles for FT branded sites. Including typographical fundamentals such as font scales, vertical rhythm, and font fallbacks; plus styles for UI including links, headings, and titles. Other components build on o-typography to provide for more specific usecases.
Provides JS helper functions, such as throttling and debouncing
Creates a video player and attaches analytics. Also supports pre roll ads.
Utility for attaching debounced listeners to resize, scroll, orientation and visibility events on window
Provides visual effects through SCSS mixins, such as shadows and animations