Header github location npm version

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

Find an issue on this page? Propose a change or discuss it.