Global Header Component

npm version

About

Install

This component is distributed with npm. After installing npm, you can install the vf-global-header with this command.

$ yarn add --dev @visual-framework/vf-global-header

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-global-header/index.scss";

Make sure you import Sass requirements along with the modules.

File system location: components/vf-global-header

Variants

Variant: Default live block

Nunjucks demo

{% render '@vf-global-header--default', {
  "component-type": "block",
  "text": "Visual Framework for Life Science websites"
} %}

Sample output

Visual Framework for Life Science websites

Sample output as HTML

<header class="vf-global-header">

  <a href="http://www.embl.de" class="vf-logo | vf-logo--has-text">
    <img class="vf-logo__image" src="../../assets/vf-logo/assets/logo.svg" alt="Visual Framework 2.0">
    <span class="vf-logo__text">Visual Framework 2.0</span>
  </a>

  <p class="vf-global-header__site-name">Visual Framework for Life Science websites</p>

  <nav class="vf-navigation vf-navigation--global">
    <ul class="vf-navigation__list | vf-list--inline">
      <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

All components in this design system

This page is part of the components section.