Header
Installation info
This component is distributed with npm. After installing npm, you can install the vf-header
with this command.
$ yarn add --dev @visual-framework/vf-header
Sass/CSS
The source files included are written in Sass(scss
). You can point your Sass include-path
at your node_modules
directory and import it like this.
@import "@visual-framework/vf-header/index.scss";
Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter
Nunjucks syntax
{% render '@vf-header', {
"component-type": "container"
} %}
HTML
<header class="vf-header">
<header class="vf-global-header">
<a href="/" class="vf-logo | vf-logo--has-text">
<img class="vf-logo__image" src="../../assets/vf-logo/assets/logo.svg" alt="Visual Framework for Life Science websites" loading="eager">
<span class="vf-logo__text">Visual Framework for Life Science websites</span>
</a>
<nav class="vf-navigation vf-navigation--global">
<ul class="vf-navigation__list | vf-list--inline | vf-cluster__inner">
<li class="vf-navigation__item">
<a href="JavaScript:Void(0);" class="vf-navigation__link">services</a>
</li>
<li class="vf-navigation__item">
<a href="JavaScript:Void(0);" class="vf-navigation__link">research</a>
</li>
<li class="vf-navigation__item">
<a href="JavaScript:Void(0);" class="vf-navigation__link">training</a>
</li>
<li class="vf-navigation__item">
<a href="JavaScript:Void(0);" class="vf-navigation__link">about us</a>
</li>
</ul>
</nav>
</header>
<div class="vf-masthead | vf-u-fullbleed">
<div class="vf-masthead__title">
<h1 class="vf-masthead__heading"><a href="JavaScript:Void(0);" class="vf-masthead__heading__link">Strategy & Communications</a><span class="vf-masthead__heading--additional">Chromosome structure and dynamics</span></h1>
<h2 class="vf-masthead__subheading"><span class="vf-masthead__subheading__text"><a href="JavaScript:Void(0);">VF Hamburg</a></span><span class="vf-masthead__subheading__text">Structural Biology</span></h2>
</div>
</div>
<nav class="vf-navigation vf-navigation--main | vf-cluster">
<ul class="vf-navigation__list | vf-list--inline | vf-cluster__inner">
<li class="vf-navigation__item">
<a href="JavaScript:Void(0);" class="vf-navigation__link" aria-current="page">Home</a>
</li>
<li class="vf-navigation__item">
<a href="JavaScript:Void(0);" class="vf-navigation__link">Download</a>
</li>
<li class="vf-navigation__item">
<a href="JavaScript:Void(0);" class="vf-navigation__link">Release Notes</a>
</li>
<li class="vf-navigation__item">
<a href="JavaScript:Void(0);" class="vf-navigation__link">FAQ</a>
</li>
<li class="vf-navigation__item">
<a href="JavaScript:Void(0);" class="vf-navigation__link">Help</a>
</li>
<li class="vf-navigation__item">
<a href="JavaScript:Void(0);" class="vf-navigation__link">Licence</a>
</li>
<li class="vf-navigation__item">
<a href="JavaScript:Void(0);" class="vf-navigation__link">About</a>
</li>
<li class="vf-navigation__item">
<a href="JavaScript:Void(0);" class="vf-navigation__link">Feedback</a>
</li>
</ul>
</nav>
<nav class="vf-navigation vf-navigation--additional | vf-u-fullbleed">
<h3 class="vf-navigation__heading">European Bioinformatics Institute</h3>
<ul class="vf-navigation__list | vf-list--inline | vf-cluster__inner">
<li class="vf-navigation__item">
<a href="JavaScript:Void(0);" class="vf-navigation__link">services</a>
</li>
<li class="vf-navigation__item">
<a href="JavaScript:Void(0);" class="vf-navigation__link">research</a>
</li>
<li class="vf-navigation__item">
<a href="JavaScript:Void(0);" class="vf-navigation__link">training</a>
</li>
<li class="vf-navigation__item">
<a href="JavaScript:Void(0);" class="vf-navigation__link">about us</a>
</li>
</ul>
</nav>
</header>
Assets
File system location: components/vf-header