Display component types
Display components with status
Filter the components below by name and tag
Component Version Status
Primitives
o-colors

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

4.4.1 active
o-fonts

Webfont loader for the FT's fonts.

3.0.4 active
o-grid

Grid for responsive layouts

4.3.8 active
o-loading

A visual loading indicator

2.2.2 active
o-typography

FT brand typographic styles

5.7.4 active
o-visual-effects

Sass mixins to use CSS visual effects

2.0.3 active
Components
g-audio

IG audio player module

1.0.5 experimental
n-alert-banner

Used for product messaging

1.0.0 experimental
o-ads

Advertising

9.4.1 active
o-aside-panel

Content panels

3.0.3 active
o-author-alerts

Alerts widget used for Author Alerts

4.2.4 experimental
o-banner

Used for product messaging

2.1.0 active
o-big-number

A pull-quote-esque component that highlights large numbers

1.1.6 experimental
o-buttons

Buttons module

5.11.8 active
o-comments

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

4.1.0 active
o-comment-ui

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

4.2.5 active
o-cookie-message

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

3.3.0 active
o-footer

Responsive Financial Times page footer

6.0.10 active
o-footer-services

A footer for non-master brand FT products

1.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.

5.7.2 active
o-ft-affiliate-ribbon

FT affiliation ribbon for Specialist Titles

3.0.4 active
o-gallery

Slideshow gallery component

3.0.3 active
o-header

Responsive Financial Times page header

7.5.9 active
o-header-services

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

2.2.4 active
o-hierarchical-nav

Responsive hierarchical nav

5.0.5 active
o-labels

Label styling

3.0.2 active
o-load

that bootstraps components

1.1.1 active
o-message

Product messaging component used for alerting and informing

2.2.2 active
o-overlay

Responsive, configurable overlays for displaying notifications to users

2.4.3 active
o-quote

Styling for block quotes

2.1.3 active
o-share

Share module

6.1.2 active
o-squishy-list

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

2.3.3 active
o-subs-card

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

2.2.0 active
o-syntax-highlight

Component description

1.1.1 active
o-table

FT-branded tables

6.7.3 active
o-tabs

Tabs component for dividing content into meaningful sections.

4.1.2 active
o-teaser

Teasers which link through to articles

2.2.8 active
o-teaser-collection

A collection of article teasers.

2.2.0 active
o-tooltip

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

3.1.2 active
o-topper

Article header styling

2.1.2 experimental
o-tracking

Module for tracking FT

1.3.8 active
o-video

Financial Times video component

4.1.10 active
Layouts
o-techdocs

A framework for building technical documentation and tool UIs

7.0.8 active
Utilities
o-ads-embed

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

2.3.2 active
o-assets

Static assets path generator

3.1.0 active
o-autoinit

Auto-initalisation event emitter

1.3.3 active
o-brand

Tools to "brand" other Origami components.

3.0.1 experimental
o-comment-count

Renders the comment count for a given article.

0.3.8 active
o-date

Utility for formatting and updating dates

2.11.0 active
o-dom

DOM manipulation and traversal helpers

2.0.6 active
o-element-visibility

Utility for moderating listeners for browser events on window

2.1.6 active
o-errors

Library for reporting front end errors

3.6.1 active
o-expander

Accessible, content-aware widget for expanding and collapsing content

4.4.4 active
o-fetch-jsonp

Fetch API helper tool that fallbacks to JSONP

2.0.6 active
o-fonts-assets

Web font files

1.3.3 active
o-hoverable

Common class and supporting JavaScript for enabling and disabling hover effects

3.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)

5.7.1 active
o-layers

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

2.0.6 active
o-normalise

Foundation styles and standardised utilities

1.6.2 active
o-toggle

Accessible show/hide behaviour

1.1.10 active
o-utils

JS helper functions

1.0.4 active
o-viewport

Utility for moderating listeners for browser events on window

3.1.5 active
Imagesets
fticons

Financial Times icons

1.14.2 active
headshot-images

Headshots of FT Journalists

1.93.0 active
logo-images

Logos used in FT products

1.6.0 active
origami-brand-images

Images for FT Brands

1.1.2 active
origami-flag-images

World flags

1.0.1 active
origami-specialist-title-logos

Logos for Specialist Titles

1.3.0 active
social-images

Social media icons, with the correct brand colours.

2.2.1 active
Services
origami-bower-registry

Install Financial Times GitHub repositories as Bower components.

59.0.0 active
origami-build-service

Origami build service

300.0.0 active
origami-image-service

Optimises and resize images.

359.0.0 active
origami-navigation-service

Provides consistent navigation for FT applications.

69.0.0 active
origami-registry-ui

Get information about Origami components, services, and repositories

79.0.0 active
origami-repo-data

Get information about Origami repositories

71.0.0 active
polyfill-service

Polyfill Service

3.25.1 active
Uncategorised
o-chat

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

3.0.2 active
o-crossword

FT-branded crosswords

1.8.3 experimental
o-link-list

Styles for lists of links

2.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"
    ]
  }
}