EMBL-EBI Header and Footer utility

Support for using the EMBL-EBI header and footer from the EMBL-EBI VF 1.3.

github location npm version


This component provides the minimum amount of legacy CSS to make the header and footer work while avoiding conflicts with other 2.0 styles.

  • This component requires the EMBL contentHub loader, which is included in most EMBL VF builds.
  • This requires VF 2.0 footer CSS and other styles.
  • If you do not currently have VF 2.0 CSS and JS as part of your project, you can use the CDN JS.
  • This uses the existing //dev.ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/js/script.js to load the HTML for the header.
  • The EBI VF 1.x will also included a data protection banner, to disable this with 1.4 you can an included an element with data-protection-message-disable="true"
    • This will be inserted by default when using the ebi-header-footer--footer template.


There is no default. Use the variant templates to load the portions you need.
There is no default. Use the variant templates to load the portions you need.
<!-- embl-ebi global footer -->
<link rel="import" href="https://wwwdev.embl.org/api/v1/pattern.html?filter-content-type=article&filter-id=106902&pattern=node-body&source=contenthub" data-target="self" data-embl-js-content-hub-loader>

  When using legacy EBI 1.x JS, we disable the old cookie banner.
<div class="vf-u-display-none" data-protection-message-disable="true"></div>
<!-- Tell the VF 1.4 not to display a data protection banner. -->
<!-- You should use the 2.0 data protection banner from the contentHub. -->
<span data-protection-message-disable="true"></span>
<!-- embl-ebi global header -->
<header id="masthead-black-bar" class="clearfix masthead-black-bar | ebi-header-footer vf-content vf-u-fullbleed"></header>
<link rel="import" href="https://wwwdev.embl.org/api/v1/pattern.html?filter-content-type=article&filter-id=6682&pattern=node-body&source=contenthub" data-target="self" data-embl-js-content-hub-loader>
<link rel="stylesheet" href="//dev.ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css" type="text/css" media="all" />
<script defer="defer" src="//dev.ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.4/js/script.js"></script>
<link rel="stylesheet" href="https://dev.assets.emblstatic.net/vf/v2/assets/ebi-header-footer/ebi-header-footer.css" type="text/css" media="all" />


Installation info

This repository is distributed with npm. After installing npm, you can install ebi-header-footer with this command.

$ yarn add --dev @visual-framework/ebi-header-footer


The style files included are written in Sass. If you're using a VF-core project, you can import it like this:

@import "@visual-framework/ebi-header-footer/index.scss";

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter




  • Resolve accessbility issues for EBI blackbar header for v1.4 and also fixes overlapping x button for search box.


  • Resolve a vf-stack + vf-content-hub + legacy black bar edge case.


  • No space between EBI black bar and a hero.
  • https://github.com/visual-framework/vf-core/pull/1724


  • Fix readme for proper display in component library docs.
  • For ebi-header-footer--footer.njk add context disable_ebi_1x_cookie_banner to disable EBI 1.x cookie banner (defaults to true).


  • Directly load CSS for global header to prevent flashes of non-styled elements.


  • changes any set- style functions to cleaner version


  • Use VF 1.4 JS to load the HTML for the global header.
  • Add documentation and example on disabling the 1.4 data protection banner, as you should use the 2.0 data protection banner from the contentHub.


  • Adds distinct footer, header templates as the header currently has more legacy dependencies.
  • Uses the new 2.0 look and feel footer.
  • Uses contentHub to load templates.
  • Ensure black bar does not have a margin at the top due to vf-stack.
  • https://github.com/visual-framework/vf-core/pull/1316


  • Adds webkit-appearance: none; as needed for Safari browsers as autoprefixer is not doing this.


  • EBI Header is once again fullbleed after changes in vf-grid-page 2.0.0.


  • Resolves changes in other VF components, spacing, links, etc.


File system location: components/ebi-header-footer

Find an issue on this page? Propose a change or discuss it.