2.1.1 • Public • Published

EMBL-EBI Header and Footer component

npm version


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


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 //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.


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



npm i @visual-framework/ebi-header-footer@2.1.1




Apache 2.0

Unpacked Size

59 kB

Total Files


Last publish


  • bhushan-ebi
  • pacope92
  • ebiwebdev
  • sandykadam
  • khawkins98