Responsive Financial Times page header

View on GitHub

Quick start

Using the build service

Add the following token to your script and link tags (how do I do that?):


For more information see the Origami build service.

Using a manual build process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-header"@"^7.1.1"

For more information see the Origami build process.



Mega menu


Header with subnav


Simple header


Transparent header


Sticky header


Sticky variation of the simple header

Subbranded header


For Subbrands of the FT, eg Alphaville or Life&Arts, a subheader can be added to mark out their subbrandness.

Grid demo


A bug we keep having is things (eg the hamburger) not lining up with the grid padding. This demo adds a grid demo below the header to make it easy to quickly check alignment

Component information

Latest stable version:
7.2.9 (9 days, 12 hours old)
Status (Learn more):
Active (as of 7.1.1)
Bundle sizes:
24.35KB JavaScript 30.94KB CSS
This version
7.1.1 (4 months, 10 days old)
Support status (Learn more):
Active (as of 7.1.1)
Last indexed
12 Feb 2018 22:57:52 (Build now)
o-buttons ^5.0.0 OK 5.8.5
o-colors ^4.0.1 OK 4.1.5
o-grid ^4.2.0 OK 4.3.8
o-icons >=4.4.2 <6 OK 5.6.0
o-toggle ^1.0.0 OK 1.1.10
o-typography ^5.0.1 OK 5.5.0
o-utils ^1.0.0 OK 1.0.4
o-visual-effects ^2.0.0 OK 2.0.3


To talk to the team you can contact the Origami team on Slack channel #ft-origami or directly by email at origami-support@ft.com

Report an issue