ComponentVersionStatusUpdated

Primitives

o-colors CSS
FT brand colours: Sass variables and helpers to use and define them
4.1.5 Active
o-fonts CSS
Webfont loader for the FT's fonts.
3.0.4 Active
o-grid CSS JS
Grid for responsive layouts
4.3.6 Active
o-loading CSS
A visual loading indicator
2.1.2 Active
o-typography CSS
FT brand typographic styles
5.4.1 Active
o-visual-effects CSS
Sass mixins to use CSS visual effects
2.0.3 Active

Components

g-audio CSS JS
IG audio player module
1.0.4 Experimental
n-sliding-popup CSS JS
Component description
2.0.0 Experimental
o-ads CSS JS
Advertising
7.1.5 Active
o-aside-panel CSS
Content panels
3.0.3 Active
o-author-alerts CSS JS
Alerts widget used for Author Alerts
4.2.3 Experimental
o-banner CSS JS
Used for product messaging
1.4.0 Active
o-big-number CSS JS
A pull-quote-esque component that highlights large numbers
1.1.6 Experimental
o-business-card CSS
Render contact information about a FT employee
1.0.4 Deprecated
o-buttons CSS
Buttons module
5.8.2 Active
o-card CSS
Card view of any kind of content
3.0.2 Active
o-chat CSS JS
A chat-style commenting component. Integrated with FT authentication and user data services.
3.0.2 Active
o-comment-ui CSS JS
Shared UI components used by o-comments and o-chat.
4.2.2 Active
o-comments CSS JS
Commenting for FT content. Integrated with FT authentication and user data services.
4.0.7 Active
o-cookie-message CSS JS
Cookie message banner which ensures sites comply with the EU cookie law
3.0.6 Active
o-email-only-signup CSS JS
Next FT - light sign-up
5.0.4 Deprecated
o-footer CSS JS
Responsive Financial Times page footer
6.0.7 Active
o-forms CSS JS
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.
4.1.5 Active
o-ft-affiliate-ribbon CSS
FT affiliation ribbon for Specialist Titles
3.0.2 Active
o-gallery CSS JS
Slideshow gallery component
3.0.3 Active
o-header CSS JS
Responsive Financial Times page header
7.2.6 Active
o-header--theme-ic CSS JS
The Investors Chronicle header. This component is a theme for o-header.
1.0.1 Deprecated
o-header-services CSS JS
Responsive page header for minimally branded sites, eg B2B tools, documentation sites, and internal tools.
2.0.5 Active
o-hierarchical-nav CSS JS
Responsive hierarchical nav
5.0.4 Active
o-labels CSS
Label styling
3.0.2 Active
o-overlay CSS JS
Responsive, configurable overlays for displaying notifications to users
2.1.5 Active
o-promobox CSS
Styling for boxes that promote the contents of themselves
1.3.8 Deprecated
o-quote CSS
Styling for block quotes
2.1.3 Active
o-section-head CSS JS
A section heading to sit between the Financial Times header and the page content, indicating a section
1.0.5 Deprecated
o-share CSS JS
Share module
6.0.2 Active
o-squishy-list JS
A horizontal list of elements that 'squishes' down, lowest priority first.
2.3.3 Active
o-subs-card CSS JS
A card for showing different subscription packages offered by the Financial Times
1.1.1 Active
o-table CSS JS
FT-branded tables
6.3.1 Active
o-tabs CSS JS
Tabs component for dividing content into meaningful sections.
4.0.4 Active
o-teaser CSS
Teasers which link through to articles
2.1.15 Active
o-teaser-collection CSS
A collection of article teasers.
2.1.1 Active
o-tooltip CSS JS
Component description
2.3.7 Active
o-tracking JS
Module for tracking FT
1.3.3 Active
o-video CSS JS
Financial Times video component
4.1.6 Active

Layouts

o-techdocs CSS JS
A framework for building technical documentation and tool UIs
7.0.6 Active

Utilities

ftdomdelegate JS
Create and manage a DOM event delegator
2.1.0 Active
o-ads-embed JS
Facilitate communication between advertising creatives in iframes and the main o-ads library via post message
2.3.2 Active
o-assets CSS JS
Static assets path generator
3.0.4 Active
o-autoinit JS
Auto-initalisation event emitter
1.3.3 Active
o-comment-count JS
Renders the comment count for a given article.
0.3.8 Active
o-date JS
Utility for formatting and updating dates
2.10.3 Active
o-dom JS
DOM manipulation and traversal helpers
2.0.6 Active
o-element-visibility JS
Utility for moderating listeners for browser events on window
2.1.6 Active
o-errors JS
Library for reporting front end errors
3.6.1 Active
o-expander CSS JS
Accessible, content-aware widget for expanding and collapsing content
4.4.4 Active
o-fetch-jsonp JS
Fetch API helper tool that fallbacks to JSONP
2.0.6 Active
o-fonts-assets
Web font files
1.3.3 Active
o-hoverable CSS JS
Common class and supporting JavaScript for enabling and disabling hover effects
3.1.4 Active
o-icons CSS
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.4.3 Active
o-in-page-nav CSS JS
Navigation for page contents
1.0.0-beta.6 Active
o-layers JS
Namespace for managing modules that make use of the z-axis
2.0.6 Active
o-normalise CSS JS
Foundation styles and standardised utilities
1.5.2 Active
o-toggle JS
Accessible show/hide behaviour
1.1.10 Active
o-utils JS
JS helper functions
1.0.4 Active
o-viewport JS
Utility for moderating listeners for browser events on window
3.1.5 Active

Imagesets

fticons
Financial Times icons
1.11.0 Active
headshot-images
Headshots of FT Journalists
1.59.1 Active
logo-images
Logos used in FT products
1.5.1 Active
origami-brand-images
Images for FT Brands
1.1.1 Active
origami-flag-images
World flags
1.0.1 Active
origami-specialist-title-logos
Logos for Specialist Titles
1.1.0 Active
social-images
Social media icons, with the correct brand colours.
2.1.3 Active

Uncategorised

eslint-config-origami-component
eslint-config-origami-component
1.0.2 Active
express-web-service
Create Express middleware to serve /__gtg, /__health, /__about, and /__error endpoints.
3.4.3 Active
ftheadshots
ftheadshots
1.0.0 Active
get-github-public-organisation-repositories
Helper function to return all public github repositories for a given organisation
1.2.3 Active
get-origami-repos
Get a JSON array of all Origami GitHub repositories
1.0.2 Active
github-label-sync
Synchronise your GitHub labels with as few destructive operations as possible
1.3.2 Active
n-message-prompts CSS JS
Next FT - message prompts client
3.1.0 Experimental
n-notification CSS JS
Next FT - onsite notification bar
6.0.3 Experimental
next-card
7.1.1
node-health-check
Build health check functions which comply with the FT health check standard
1.2.3 Active
o-comment-api JS
An abstraction of FT's commenting APIs, used by o-comments and o-chat
2.4.0 Active
o-comment-utilities JS
A collection of helper functions used by o-comments and o-chat.
2.3.0 Active
o-cookies JS
Utility for getting and setting cookies, including read/write of individual values within compound FT cookies
1.1.1 Deprecated
o-crossword CSS JS
FT-branded crosswords
1.7.1 Experimental
o-ft-buttons CSS
Buttons module
1.7.7 Deprecated
o-ft-footer CSS
Responsive Financial Times page footer
2.0.6 Deprecated
o-ft-forms CSS
Forms module
0.13.4 Deprecated
o-ft-icons CSS
Financial Times icons
3.5.2 Deprecated
o-ft-typography CSS
FT brand typographic styles
1.16.1 Deprecated
o-link-list CSS
Styles for lists of links
2.0.3 Experimental
o-test-component CSS
A component used to test origami tools and services
1.0.27 Deprecated
o-tweet CSS
Styles and markup for embedding tweets
1.0.0 Deprecated
o-useragent CSS JS
Mechanism to target style rules at only specific user agents, allowing browser-specific bugs to be fixed. Also includes convenience methods for dealing with vendor prefixed CSS and JavaScript properties.
2.2.1 Deprecated
origami-build-tools
Origami component development tools.
7.2.4 Active
origami-image-set-tools
Tools for managing and uploading Origami image sets.
1.4.5 Active
origami-react
Test app combining origami and react
0.1.0 Active
origami-service
Provides an extended Express, as well as useful tools for building consistent Origami services.
2.3.1 Active
origami-service-makefile
Common tools for building and running Origami services
6.1.0 Active
polyfill-service
Polyfill Service
3.24.0 Active
release-log
Automate opening/closing of release log change requests for FT applications
1.1.5 Active
source-param-middleware
Require a valid source parameter in Express requests.
1.0.6 Active
streamcat
Concatenate ReadStreams and Buffers!
2.6.1 Active
svg-tint-stream
Tint SVGs in a streaming manner
0.4.0 Active

Updates to the library

Every 4 hours, the library automatically scans the FT and FT Labs public GitHub accounts, and Stash, for repositories containing an Origami configuration file. To publish a new component and make it available on the Origami component library, push it to one of these Git locations, and ensure it is correctly set up with the appropriate Origami config.

Last scan: .

Registry API

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"
    ]
  }
}
Origami