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
An origami component for autocomplete inputs
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.
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.
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.
Layout for editorial content. Including margins for editorial typography.
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.
Create Express middleware to serve /__gtg, /__health, /__about, and /__error endpoints.
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 concept button (includes the ft follow button)
Helper function to return all public github repositories for a given organisation
Synchronise your GitHub labels with as few destructive operations as possible
Automate your project Grafana dashboards.
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
An npm tool to report about any Origami packages which are included with more than one version.
Labels for content classification or to emphasise a value. Provides customisation options with the FT colour palette.
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
A temporary helper library to avoid newer dart-sass versions printing warnings when compiling Origami.
Provides message elements for alerting, informing or making calls to action.
Build health check functions which comply with the FT health check standard
Provides base styles and resets for stylesheets. Includes standardised utilities, such as visually hiding components or adding a consistent focus state.
Origami build service
A CLI tool to find the difference in JS and CSS bundle size between component versions.
Continuous Integration tools for Origami components
Origami Code Documentation
The tool that puts origami components on npm
Optimises and resize images.
Provides the data consumed via origami-navigation-service.
Provides consistent navigation for FT applications.
A GitHub action for updating Origami's project board with new issues and PRs
Propose and track new Origami components
Test app combining origami and react
Get information about Origami components, services, and repositories
Get information about Origami repositories
A Node.js client for the Origami Repo Data service
Provides an extended Express, as well as useful tools for building consistent Origami services.
Common tools for building and running Origami services
Provides VSCode extensions which are useful for developing Origami components
The Origami homepage
Configurable custom overlay box that can be used to show overlay windows. The overlays can also be switched to display differently on small screens
An alternative to core-js for nodeJS environments
Styling for blockquotes, pull-quotes and any other types of quote
remark lint preset for Origami component README.md
Native Sass binaries for your platform.
Provides styling for social media sharing links
Provides styling for social media sharing links
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
Concatenate ReadStreams and Buffers!
Stylelint configuration which helps catch bugs and ensure consistency between Origami component Sass.
A card for showing different subscription packages offered by the Financial Times
Tint SVGs in a streaming manner
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