o-header

CSS JS

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?):

o-header@^6.14.4

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"@"^6.14.4"

For more information see the Origami build process.

Header


			

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:
6.14.4 (10 days, 15 hours old)
Status (Learn more):
Active (as of 6.14.4)
Bundle sizes:
24.13KB JavaScript 30.11KB CSS
This version
6.14.4 (10 days, 15 hours old)
Support status (Learn more):
Active (as of 6.14.4)
Last indexed
26 May 2017 12:51:32 (Build now)
Installable?
OK
Dependencies
o-buttons ^4.5.2 OK 4.5.4
o-colors ^3.3.2 Out of date 4.0.1
o-grid ^4.2.0 OK 4.3.1
o-icons >=4.4.2 <6 OK 5.3.0
o-toggle ^1.0.0 OK 1.1.6
o-typography ^4.1.0 Out of date 5.0.1
o-utils ^1.0.0 OK 1.0.2
o-visual-effects >=0.1.0 < 2 Out of date 2.0.0
Dependents
alphaville-headeralphaville-uifthelp-wp-templaten-uio-header--theme-ico-header-serviceso-techdocs

Contact

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

Origami