Filter components by name or tag
Filter components by type
Filter components by status
  • Primitives
  • o-colors

    FT brand colours: Sass variables and helpers to use and define them

    v4.7.2 active
  • o-fonts

    Webfont loader for the FT's fonts.

    v3.0.4 active
  • o-grid

    Grid for responsive layouts

    v4.4.4 active
  • o-loading

    A visual loading indicator

    v2.3.0 active
  • o-typography

    FT brand typographic styles

    v5.7.7 active
  • o-visual-effects

    Sass mixins to use CSS visual effects

    v2.0.3 active
  • Components
  • g-audio

    IG audio player module

    v1.0.5 experimental
  • n-alert-banner

    Used for product messaging

    v1.0.0 experimental
  • o-ads

    Advertising

    v10.1.3 active
  • o-author-alerts

    Alerts widget used for Author Alerts

    v4.2.4 experimental
  • o-banner

    Used for product messaging

    v2.1.3 active
  • o-big-number

    A pull-quote-esque component that highlights large numbers

    v1.1.6 experimental
  • o-buttons

    Buttons module

    v5.15.1 active
  • o-comments

    Commenting for FT content. Integrated with FT authentication and user data services.

    v4.1.2 active
  • o-comment-ui

    Shared UI components used by o-comments and o-chat.

    v4.2.6 active
  • o-cookie-message

    Cookie message banner which ensures sites comply with the EU cookie law

    v4.6.5 active
  • o-footer

    Responsive Financial Times page footer

    v6.0.10 active
  • o-footer-services

    A footer for non-master brand FT products

    v2.0.2 active
  • o-forms

    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.

    v5.8.3 active
  • o-ft-affiliate-ribbon

    FT affiliation ribbon for Specialist Titles

    v3.0.4 active
  • o-gallery

    Slideshow gallery component

    v3.0.3 active
  • o-header

    Responsive Financial Times page header

    v7.5.13 active
  • o-header-services

    Responsive page header for minimally branded sites, eg B2B tools, documentation sites, and internal tools.

    v2.3.4 active
  • o-hierarchical-nav

    Responsive hierarchical nav

    v5.0.5 active
  • o-labels

    Label styling

    v3.1.1 active
  • o-layout

    A layout component for internal products and tools

    v2.0.1 active
  • o-load

    that bootstraps components

    v1.1.1 active
  • o-message

    Product messaging component used for alerting and informing

    v2.4.0 active
  • o-overlay

    Responsive, configurable overlays for displaying notifications to users

    v2.4.3 active
  • o-quote

    Styling for block quotes

    v2.1.3 active
  • o-share

    Share module

    v6.2.0 active
  • o-squishy-list

    A horizontal list of elements that 'squishes' down, lowest priority first.

    v2.3.3 active
  • o-subs-card

    A card for showing different subscription packages offered by the Financial Times

    v2.2.1 active
  • o-syntax-highlight

    Component description

    v1.5.2 active
  • o-table

    FT-branded tables

    v6.9.2 active
  • o-tabs

    Tabs component for dividing content into meaningful sections.

    v4.2.0 active
  • o-teaser

    Teasers which link through to articles

    v2.3.1 active
  • o-teaser-collection

    A collection of article teasers.

    v2.2.0 active
  • o-tooltip

    A tooltip for annotating or drawing attention to other bits of UI

    v3.2.3 active
  • o-topper

    Article header styling

    v2.3.0 experimental
  • o-tracking

    Module for tracking FT

    v1.4.0 active
  • o-video

    Financial Times video component

    v4.1.10 active
  • Layouts
  • o-techdocs

    A framework for building technical documentation and tool UIs

    v7.0.9 maintained
  • Utilities
  • ftdomdelegate

    Create and manage a DOM event delegator

    v2.2.0 active
  • o-ads-embed

    Facilitate communication between advertising creatives in iframes and the main o-ads library via post message

    v2.3.2 active
  • o-assets

    Static assets path generator

    v3.1.0 active
  • o-autoinit

    Auto-initalisation event emitter

    v1.3.3 active
  • o-brand

    Tools to "brand" other Origami components.

    v3.1.1 experimental
  • o-comment-api

    An abstraction of FT's commenting APIs, used by o-comments and o-chat

    v2.4.1 active
  • o-comment-count

    Renders the comment count for a given article.

    v0.3.8 active
  • o-date

    Utility for formatting and updating dates

    v2.11.0 active
  • o-dom

    DOM manipulation and traversal helpers

    v2.0.6 active
  • o-element-visibility

    Utility for moderating listeners for browser events on window

    v2.1.6 active
  • o-errors

    Library for reporting front end errors

    v3.6.2 active
  • o-expander

    Accessible, content-aware widget for expanding and collapsing content

    v4.4.4 active
  • o-fetch-jsonp

    Fetch API helper tool that fallbacks to JSONP

    v2.0.6 active
  • o-fonts-assets

    Web font files

    v1.3.3 active
  • o-hoverable

    Common class and supporting JavaScript for enabling and disabling hover effects

    v3.1.4 active
  • o-icons

    Helper Sass for using the FT's icons. For a full list of available icons please see the fticons image set(http://registry.origami.ft.com/components/fticons)

    v5.8.0 active
  • o-layers

    Namespace for managing modules that make use of the z-axis

    v2.0.6 active
  • o-normalise

    Foundation styles and standardised utilities

    v1.6.2 active
  • o-toggle

    Accessible show/hide behaviour

    v1.1.10 active
  • o-utils

    JS helper functions

    v1.0.5 active
  • o-viewport

    Utility for moderating listeners for browser events on window

    v3.1.6 active
  • Imagesets
  • fticons

    Financial Times icons

    v1.15.1 active
  • headshot-images

    Headshots of FT Journalists

    v1.113.0 active
  • logo-images

    Logos used in FT products

    v1.8.0 active
  • origami-brand-images

    Images for FT Brands

    v1.1.2 active
  • origami-flag-images

    World flags

    v1.0.1 active
  • origami-specialist-title-logos

    Logos for Specialist Titles

    v1.3.0 active
  • social-images

    Social media icons, with the correct brand colours.

    v2.2.1 active
  • Services
  • origami-bower-registry

    Install Financial Times GitHub repositories as Bower components.

    v62.0.0 active
  • origami-build-service

    Origami build service

    v304.0.0 active
  • origami-dashboards

    Displays glanceable information about the status of Origami services and modules

    v52.0.0 active
  • origami-image-service

    Optimises and resize images.

    v362.0.0 active
  • origami-navigation-service

    Provides consistent navigation for FT applications.

    v71.0.0 active
  • origami-registry-ui

    Get information about Origami components, services, and repositories

    v143.0.0 active
  • origami-repo-data

    Get information about Origami repositories

    v80.0.0 active
  • polyfill-service

    Polyfill Service

    v3.25.1 active
  • polyfill-service-serverless

    Polyfill Service

    v3.25.0 active
  • Uncategorised
  • n-notification

    Next FT - onsite notification bar

    v6.1.0 experimental
  • o-chat

    A chat-style commenting component. Integrated with FT authentication and user data services.

    v3.0.2 active
  • o-crossword

    FT-branded crosswords

    v1.8.3 experimental
  • o-link-list

    Styles for lists of links

    v2.0.3 experimental

Library Updates

The registry is updated whenever a new tag is pushed to a repository that has an origami.json file in it. If your repository meets the following criteria then it should be ingested within 5 minutes:

Bower Registry

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": [
	      "https://origami-bower-registry.ft.com",
	      "https://registry.bower.io"
	    ]
	  }
	}