Local components

EMBL-EBI Header and Footer

This provides support for using the EMBL-EBI header and footer from the EMBL-EBI VF 1.3. It provides the minimum amount of legacy CSS to make the header and footer work while avoiding conflicts with other 2.0 styles.

Note

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"

Variants

There is no default. Use the variant templates to load the portions you need.

HTML

There is no default. Use the variant templates to load the portions you need.

HTML

<!-- embl-ebi global footer -->
<link rel="import" href="https://www.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>

HTML

<!-- 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://www.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="//ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css" type="text/css" media="all" />
<script defer="defer" src="//ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.4/js/script.js"></script>

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

Sass/CSS

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

Changelog

1.0.23

small change to cards on homepage

1.0.18

dependency bump

1.0.17

dependency bump

1.0.16

dependency bump

1.0.13

dependency bump
adds roamap and consultation docs

1.0.12

design token documenation now lives in the component libary

1.0.7

adds updates blog

1.0.6

begin to make more pattern/boilerplate guidance
minor templating updates

1.0.5

dependency bump

1.0.4

uses vf-favicon
adds meta attributes

1.0.3

run vf-component-assets:everything on local dev
remove reference to removed /css/app.css

1.0.2

Add 404
Fix component CSS generation

1.0.1

Also generate per-component CSS with vf-css:generate-component-css

1.0.0

Initial release to be used with vf-core 2.2.0

Assets

File system location: components/ebi-header-footer