Open primary navigation
Origami Frontend Components & Services

SassDoc: o-header

oHeaderLink

Base styles for header links

Links

oHeaderFancyLink

More visually decorated link styles

Links

oHeaderItemSeparator

Horizontal list item separator

Links

oHeaderLogoSize(breakpoint)

Calculate logo dimensions for the given breakpoint

parameter type default description
breakpoint XS, S, M, L or XL

Links

oHeaderBrandImage(...)

Construct a logo image URL

parameter type default description
logo-name
color
fallback-width

Links

oHeaderVisuallyHidden

Applies styles to hide an element accessibly, allowing the content to be read by screenreaders.

Links

oHeader(features)

Output the styles for the header. Can be passed a list of one or more rows to output. By default, will output all row styles.

parameter type default description
features

Links

o-header-image-base-url

Option to change the base of the image service url

Links

o-header-image-service-version

Option to change the version of the image service url

Links

oHeader(features)

Output the styles for the header. Can be passed a list of one or more rows to output. By default, will output all row styles.

parameter type default description
features

Links

Switch component view

GitHub Repository

Install o-header

If using the Build Service, add o-header@^7.8.12 to your script and link tags. Ensure the correct brand is set with a query parameter &brand=internal.

If running a Manual Build, run bower install --save "o-header@^7.8.12".

Help & Support

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

Slack: #ft-origami
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: #ft-origami
Email: origami.support@ft.com