1.0.0-alpha.1 • Public • Published

    ELIXIR Banner

    npm version


    This should be placed in the footer of sites that are part of the ELIXIR network.


    This is an early version that is largely a port of the VF 1.3 ELIXIR Banner with some notable changes:

    • The data option prefixes have changed to match VF 2 practice data-name is now data-vf-banner-elixir-name, and similarly for the other options.
    • The multiple background colour options (green, orange, blue) have been dropped as they were poorly used and often presented colour-contrast accessibility issues.


    • data-vf-js-banner-elixir-logo="" (optional)
    • data-vf-js-banner-elixir-name="Your Service Name" (optional)
      • " is part of the ELIXIR infrastructure" will be appended
    • data-vf-js-banner-elixir-description="text here" (optional)
      • set the text in the small line of text to explain your relationship with ELIXIR
    • data-vf-js-banner-elixir-link="https://url" (optional)
      • by default the banner will point to a page at www.elixir-europe.org. If you would prefer to link to a custom page explaining your relationship with ELIXIR, add the full URL here

    The development and future direction of this component can be discussed in issue #1572. While breaking changes are anticipated they are currently not expected.

    This component leverages the Sass/CSS of vf-banner, so it should also be installed.


    This component targets WCAG 2.1 AA accessibility.

    You can also read about the Visual Framework's approach to accessibility.


    This repository is distributed with [npm][https://www.npmjs.com/]. After [installing npm][https://www.npmjs.com/get-npm] and yarn, you can install vf-banner-elixir and the supporting vf-banner with this command.

    $ yarn add --dev @visual-framework/vf-banner-elixir @visual-framework/vf-banner


    You should import this component in ./components/vf-component-rollup/scripts.js or your other JS process:

    import { vfBannerElixir } from 'vf-banner-elixir/vf-banner-elixir';
    // Or import directly
    // import { vfBannerElixir } from '../components/raw/vf-banner-elixir/vf-banner-elixir.js';
    vfBannerElixir(); // if needed, invoke it


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

    @import 'vf-banner/vf-banner.scss';
    @import "@visual-framework/vf-banner-elixir/vf-banner-elixir.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/vf-banner-elixir

    DownloadsWeekly Downloads





    Apache 2.0

    Unpacked Size

    29.6 kB

    Total Files


    Last publish


    • khawkins98