Origami Frontend Components & Services

Readme: o-header-services

This header is for tools and services built by the Financial Times.

Index

Design

o-header-services is a responsive header. It has support for up to three levels of navigation making it appropriate for single page applications and multi-layer applications.

It has themes for B2B and B2C products under FT.com. If you're building something and need a new theme, please raise an issue.

The header has the following features:

Required

Optional

Markup

Very simple header

The simplest header, appropriate for single page applications with no navigation is available with the following code:

<header class='o-header-services' data-o-component='o-header'>
    <div class='o-header-services__top o-header-services__container'>
        <div class='o-header-services__ftlogo'></div>
        <div class='o-header-services__title'>
            <h1 class='o-header-services__product-name'><a href='/'>Tool or Service name</a></h1>
            <span class='o-header-subrand__product-tagline '>Tagline to explain the product here</span>
        </div>
    </div>
</header>

Themes

o-header-services offers theming for B2B or B2C products under FT.com. To add a theme to the header, add the appropriate class to a wrapping element. For example, for b2b that would be:

+<header class='o-header-services o-header-services--b2b' data-o-component='o-header'>
-<header class='o-header-services' data-o-component='o-header'>
    <div class='o-header-services__top o-header-services__container'>
        <div class='o-header-services__ftlogo'></div>
        <div class='o-header-services__title'>
            <h1 class='o-header-services__product-name'><a href='/'>Tool or Service name</a></h1>
            <span class='o-header-subrand__product-tagline '>Tagline to explain the product here</span>
        </div>
    </div>
</header>

o-header-services supports related content (eg Sign in or licence numbers). At large screen widths these appear to the far right of the header. At smaller screens these collapse down to a drawer which is behind a hamburger menu.

Core experience of the drawer

Small screen users should still be able to access the contents of the drawer even if their browser doesn't cut the mustard or the JavaScript has failed to load. In this case we recommend you have the contents of the drawer at the bottom of the page in a footer that is only visible if the body has a .core class. In core experience the hamburger menu links to an anchor at the bottom of the page.

To add support for related content, add the following to your markup:

<header class='o-header-services' data-o-component='o-header'>
    <div class='o-header-services__top'>
        <div class='o-header-services__container'>
+            <div class='o--if-js o-header-services__hamburger'>
+                <a class='o-header-services__hamburger-icon' href="#o-header-drawer"    aria-controls="o-header-drawer"><span class="o-header__visually-hidden">Menu</span></a>
+            </div>
            <div class='o-header-services__ftlogo'></div>
            <div class='o-header-services__title'>
                <h1 class='o-header-services__product-name'><a href=''>Tool or Service name</a></h1><span class='o-header-subrand__product-tagline '>Tagline to explain the product here</span>
            </div>
            <div class='o-header-services__related-content'>
                <a href='#'>XXXX</a>
                <a href='#'>Sign in</a>
            </div>
        </div>
    </div>
</header>
<!-- Drawer HTML from o-header which should include the links from related content. -->

Related content also needs some JavaScript to operate the drawer. If you are using the Build Service this will just work. If you're using a manual build process you should have the following somewhere in your code (what's this?):

document.addEventListener("DOMContentLoaded", function() {
    document.documentElement.className = document.documentElement.className.replace('core', 'enhanced');
    document.dispatchEvent(new CustomEvent('o.DOMContentLoaded'));
});

Primary navigation

If your application has more than one page you may want to add the primary navigation bar.
This requires the drawer code, as seen above, and the following addition:

<header class='o-header-services' data-o-component='o-header'>
    <div class='o-header-services__top'>
        <div class='o-header-services__container'>
            <div class='o--if-js o-header-services__hamburger'>
                <a class='o-header-services__hamburger-icon' href="#o-header-drawer"    aria-controls="o-header-drawer"><span class="o-header__visually-hidden">Menu</span></a>
            </div>
            <div class='o-header-services__ftlogo'></div>
            <div class='o-header-services__title'>
                <h1 class='o-header-services__product-name'><a href=''>Tool or Service name</a></h1><span class='o-header-subrand__product-tagline '>Tagline to explain the product here</span>
            </div>
            <div class='o-header-services__related-content'>
                <a href='#'>XXXX</a>
                <a href='#'>Sign in</a>
            </div>
        </div>
    </div>
</header>
+<nav class='o-header-services__primary-nav'>
+ <div class='o-header-services__container'>
+     <ul class='o-header-services__nav-list'>
+         <li class='o-header-services__nav-item o-header-services__nav-item--selected'>
+             <a href='#'>
+                 Nav item title
+             </a>
+            </li>
+            <!-- more nav items -->
+        </ul>
+    </div>
+</nav>
<!-- Drawer HTML as above this should include related content links (if any) and nav items-->

Secondary navigation

If your application is more complicated still, you may want to use a secondary navigation.
The secondary nav allows for breadcrumbs for many addition levels of navigation.

To use the secondary navigation, use the primary navigation (with the drawer) and add the following code:

<header class='o-header-services' data-o-component='o-header'>
    <div class='o-header-services__top'>
        <div class='o-header-services__container'>
            <div class='o--if-js o-header-services__hamburger'>
                <a class='o-header-services__hamburger-icon' href="#o-header-drawer"    aria-controls="o-header-drawer"><span class="o-header__visually-hidden">Menu</span></a>
            </div>
            <div class='o-header-services__ftlogo'></div>
            <div class='o-header-services__title'>
                <h1 class='o-header-services__product-name'><a href=''>Tool or Service name</a></h1><span class='o-header-subrand__product-tagline '>Tagline to explain the product here</span>
            </div>
            <div class='o-header-services__related-content'>
                <a href='#'>XXXX</a>
                <a href='#'>Sign in</a>
            </div>
        </div>
    </div>
</header>
<nav class='o-header-services__primary-nav'>
 <div class='o-header-services__container'>
     <ul class='o-header-services__nav-list'>
         <li class='o-header-services__nav-item o-header-services__nav-item--selected'>
             <a href='#'>
                 Nav item title
             </a>
            </li>
            <!-- more nav items -->
        </ul>
    </div>
</nav>
<!-- note that these are o-header classes, because this component inherits directly from o-header and overrides a few styles -->
+<nav class="o-header__subnav" role="navigation" aria-label="Sub navigation" data-o-header-subnav>
+    <div class="o-header-services__container">
+        <div class="o-header__subnav-wrap-outside">
+            <div class="o-header__subnav-wrap-inside" data-o-header-subnav-wrapper>
+                <div class="o-header__subnav-content">
+                    <ol class="o-header__subnav-list o-header__subnav-list--breadcrumb" aria-label="Breadcrumb">
+                        <li class="o-header__subnav-item">
+                            <a class="o-header__subnav-link" href="#">
+                                ancestor section
+                            </a>
+                        </li>
+                        <!-- other breadcrumb links -->
+                    </ol>
+                    <ul class="o-header__subnav-list o-header__subnav-list--children" aria-label="Subsections">
+                        <li class="o-header__subnav-item">
+                            <a class="o-header__subnav-link" href="{{href}}">
+                                child page
+                            </a>
+                        </li>
+                        <!-- More links to child pages -->
+                    </ul>
+                </div>
+            </div>
+            <button class="o-header__subnav-button o-header__subnav-button--left" title="scroll left" aria-hidden="true" disabled></button>
+            <button class="o-header__subnav-button o-header__subnav-button--right" title="scroll right" aria-hidden="true" disabled></button>
+        </div>
+    </div>
+</nav>

<!-- Drawer HTML as above this should include related content links (if any) and nav items-->

Bleed Header

If your application requires a bleed header, it will be necessary to replace all instances of o-header-services__container with o-header-services__bleed-container.
For example, in the case of using both primary and secondary navigation:

<header class='o-header-services' data-o-component='o-header'>
    <div class='o-header-services__top'>
-        <div class='o-header-services__container'>
+        <div class='o-header-services__bleed-container'>
            <div class='o--if-js o-header-services__hamburger'>
                <a class='o-header-services__hamburger-icon' href="#o-header-drawer"    aria-controls="o-header-drawer"><span class="o-header__visually-hidden">Menu</span></a>
            </div>
            <div class='o-header-services__ftlogo'></div>
            <div class='o-header-services__title'>
                <h1 class='o-header-services__product-name'><a href=''>Tool or Service name</a></h1><span class='o-header-subrand__product-tagline '>Tagline to explain the product here</span>
            </div>
            <div class='o-header-services__related-content'>
                <a href='#'>XXXX</a>
                <a href='#'>Sign in</a>
            </div>
        </div>
    </div>
</header>
<nav class='o-header-services__primary-nav'>
-    <div class='o-header-services__container'>
+    <div class='o-header-services__bleed-container'>
        <ul class='o-header-services__nav-list'>
            <li class='o-header-services__nav-item o-header-services__nav-item--selected'>
                <a href='#'>
                    Nav item title
                </a>
            </li>
            <!-- more nav items -->
        </ul>
    </div>
</nav>
<!-- note that these are o-header classes, because this component inherits directly from o-header and overrides a few styles -->
<nav class="o-header__subnav" role="navigation" aria-label="Sub navigation" data-o-header-subnav>
-    <div class="o-header-services__container">
+    <div class="o-header-services__bleed-container">
        <div class="o-header__subnav-wrap-outside">
            <div class="o-header__subnav-wrap-inside" data-o-header-subnav-wrapper>
                <div class="o-header__subnav-content">
                    <ol class="o-header__subnav-list o-header__subnav-list--breadcrumb" aria-label="Breadcrumb">
                        <li class="o-header__subnav-item">
                            <a class="o-header__subnav-link" href="#">
                                ancestor section
                            </a>
                        </li>
                        <!-- other breadcrumb links -->
                    </ol>
                    <ul class="o-header__subnav-list o-header__subnav-list--children" aria-label="Subsections">
                        <li class="o-header__subnav-item">
                            <a class="o-header__subnav-link" href="{{href}}">
                                child page
                            </a>
                        </li>
                        <!-- More links to child pages -->
                    </ul>
                </div>
            </div>
            <button class="o-header__subnav-button o-header__subnav-button--left" title="scroll left" aria-hidden="true" disabled></button>
            <button class="o-header__subnav-button o-header__subnav-button--right" title="scroll right" aria-hidden="true" disabled></button>
        </div>
    </div>
</nav>

<!-- Drawer HTML as above this should include related content links (if any) and nav items-->

Sass

As with all Origami components, o-header-services has a silent mode. To use its compiled CSS (rather than using its mixins with your own Sass) set $o-header-services-is-silent : false; in your Sass before you import the o-header-services Sass.

As previously mentioned, the logo in the header will default to the FT logo. Although it is customisable, that is currently only available through the use of mixins. Within your main Sass file, include the following, along with your products' logo, preferably as a png or an svg.

@import 'o-header-services/main';

@include oHeaderServices($class: 'my-product-header', $logo: 'my-product-logo');

Migration guide

Migrating from v1.x.x to v2.x.x

V2 bumps to the new major versions of o-header, o-colors, and o-typography. If you are using any of these components in your projects you will have bower conflicts that you need to resolve by upgrading those components too.
V2 includes some minor visual changes, but these shouldn't be breaking changes for projects that include them.


Contact

If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #ft-origami or email Origami Support.


Licence

This software is published by the Financial Times under the MIT licence.

Switch component view

GitHub Repository

Install o-header-services

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

If running a Manual Build, run bower install --save "o-header-services@^2.3.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: #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