Origami Frontend Components & Services

SassDoc: o-header-services

oHeaderServices(opts)

Outputs all features and styles available to o-header-services

parameter type default description
opts (optional) 'types':('primary-nav', 'secondary-nav', 'b2b', 'b2c'), 'features': ('bleed', 'drop-down'), 'drawer-breakpoint': 'M', 'logo': default to ft-logo depending on brand (pink or white)

Examples

Example #1

This example outputs styles for a header with an origami logo, and a primary navigation with dropdowns.

@include oHeaderServices($opts: (
	'types': ('primary-nav'),
	'features': ('drop-down'),
	'logo': 'origami'
))

Example #2

This example changes the breakpoint at which the primary navigation is hidden behind a drawer.

@include oHeaderServices($opts: (
	'types': ('primary-nav'),
	'features': ('drop-down'),
	'logo': 'origami',
	'drawer-breakpoint': 'L'
))

Links

Status
active
Switch component view

GitHub: o-header-services@5.2.4

Install o-header-services

If using the Build Service, add o-header-services@^5.2.4 to your script and link tags.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-header-services@^5.2.4".

Help & Support

o-header-services is maintained directly by the Origami team. If you have any questions about o-header-services or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com