<div id="elixir-banner" data-color="grey" data-name="This service" data-description="I am a super cool service" data-more-information-link="https://www.elixir-europe.org/about-us/who-we-are/nodes/embl-ebi" data-use-basic-styles="true"></div>
<script defer="defer" src="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/js/elixirBanner.js"></script>
Optional data
attributes:
data-color
: set the background color; options: orange, grey, blue, green, none (black text on white)data-name
: set part of the tite (data-name + "is part of the ELIXIR infrastructure")data-use-cdr-logo
: use the ELIXIR CDR logo instead of the kitemarkdata-description
: set the text in the small line of textdata-more-information-link
: 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 ELXIR, add the full URL heredata-use-basic-styles
: if you have not loaded the Foundation Framework CSS, set to true
and will inject a few lines of css for basic formattingTry it on CodePen or see an example implementation.
If you are unable to insert the div
in the appropriate spot, you can use JavaScript. Shown below with jQuery for brevity:
jQuery("<div id='elixir-banner' data-color='grey' data-name='This service' data-description=' am a super cool service' data-more-information-link='https://www.elixir-europe.org/about-us/who-we-are/nodes/embl-ebi' data-use-basic-styles='true'></div> <script defer='defer' src='https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/js/elixirBanner.js'></script>").insertBefore('#global-footer');