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
Used for product messaging
IG audio player module
Financial Times audio player
Alerts widget used for Author Alerts
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.
Render contact information about a FT employee
FT buttons styles. Provides customisation options with the FT colour palette.
Card view of any kind of content
A chat-style commenting component. Integrated with FT authentication and user data services.
The default colour palette for all FT products. The palette supports colour contrast checking, colour mixing and toneing.
An abstraction of FT's commenting APIs, used by o-comments and o-chat
Renders the comment count for a given article.
Shared UI components used by o-comments and o-chat.
A collection of helper functions 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.
Utility for getting and setting cookies, including read/write of individual values within compound FT cookies
Generate boilerplate for a new Origami Component.
DOM manipulation and traversal helpers
Layout for editorial content. Including margins for editorial typography.
Typography styles for editorial content.
Utility that enables a product to track whether an element is visible within the browser viewport.
Next FT - light sign-up
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.
Client-side fetch wrapper that fallbacks to JSONP. This circumvents cross-domain issues involved with sending JSON data
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.
Responsive Financial Times page footer
Responsive Financial Times page header
Financial Times icons
FT signin/out widget
This is the source code for the Origami website. Please visit [http://origami.ft.com/](http://origami.ft.com/) if you're looking for the documentation.
FT brand typographic styles
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.
Helper function to return all public github repositories for a given organisation
Get a JSON array of all Origami GitHub repositories
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
The Investors Chronicle header. This component is a theme for o-header.
Responsive page header for sites with minimal or customised branding, including internal products, customer facing tools, and specialist titles.
An image set of headshots of all the FT's journalists. Primarily for use with bylines.
Responsive hierarchical nav
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.
Proclaim assertion library for Karma.
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.
Styles for lists of links
Origami component that bootstraps non-Origami components
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
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.
Next FT - onsite notification bar
GitHub action to apply Origami labels to new issues and pull requests
Install Financial Times GitHub repositories as Bower components.
A collection of images for FT brands, such as blogs or specific sections
Origami build service
Origami component development tools.
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
Displays glanceable information about the status of Origami services and modules
A collection of official, vectorised international flags
Optimises and resize images.
Tools for managing and uploading Origami image sets.
GitHub action to sync a repo's issue labels with the standard Origami set
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
Origami component registry; lists modules and web services with build status details, etc.
Get information about Origami components, services, and repositories
Get information about Origami repositories
A Node.js client for the Origami Repo Data service
Capture web pages as images
Provides an extended Express, as well as useful tools for building consistent Origami services.
Common tools for building and running Origami services
A collection of logos used by Specialist Titles, such as Investors Chronicle, Non-executive Directors' Club.
GitHub action to create a semver git tag and release based on the semver label a pull-request has
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
WIP/experimental - Integrates Permutive Datamanagement platform into a website
An alternative to core-js for nodeJS environments
This is the VCL & JS implementation of the User-Agent normalisation used within the polyfill-service and the polyfill-library.
UI components for user profile and consent
Styling for boxes that promote the contents of themselves
Styling for blockquotes, pull-quotes and any other types of quote
Automate opening/closing of release log change requests for FT applications
remark lint preset for Origami component README.md
Native Sass binaries for your platform.
A section heading to sit between the Financial Times header and the page content, indicating a section
Provides styling for social media sharing links
Icons for social media.
Require a valid source parameter in Express requests.
Maintain consistent spaces across components and projects in accordance to our baseline grid and design guidelines.
Tool to compress a list of elements horizontally, hiding lower priority items first.
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.
A framework for building technical documentation and tool UIs
A component used to test origami tools and services
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
Article header styling
Provides tracking for a product. Tracking requests are sent to the Spoor API.
Styles and markup for embedding tweets
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