@visual-framework/vf-banner-elixir v1.0.0-alpha.2
ELIXIR Banner
About
This should be placed in the footer of sites that are part of the ELIXIR network.
Usage
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 nowdata-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.
Options
data-vf-js-banner-elixir-logo=""
(optional)- this value is optional, the banner will default to use the normal ELIXIR logo. Passing
CDR
will use the ELIXIR Core Data Resource mark.
- this value is optional, the banner will default to use the normal ELIXIR logo. Passing
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.
Accessibility
This component targets WCAG 2.1 AA accessibility.
You can also read about the Visual Framework's approach to accessibility.
Install
This repository is distributed with npm. After installing 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
JS
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
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 '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
Help
1 year ago
3 years ago