@govflanders/vl-ui-global-header-placeholder NPM

Global header placeholder

Simple, small placeholder element for the Global Header widget provided by the government of Flanders.

Installation

npm install @govflanders/vl-ui-global-header-placeholder -S

Usage

SASS

Import the dist css (standard or minified) in your scss build

@import “~@govflanders/vl-ui-global-header-placeholder/dist/css/global-header-placeholder.min.css”

Or link the dist css in your <head>

<link rel="stylesheet" type="text/css" href="path/to/stylesheet/global-header-placeholder.min.css">

HTML

After including the stylesheet, add the following HTML after the <script> tag provided by the global header.

<div class=“vl-global-header-placeholder”></div>

Modifiers

Have a secondary (gray) bar with breadcrumb and/or search as well? Use:

<div class=“vl-global-header-placeholder vl-global-header-placeholder—large”></div>

CDN

JsDelivr provides a CDN for NPM packages. Note that this is a third-party CDN and we cannot guarantee the up-time of this service.

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@govflanders/vl-ui-global-header-placeholder@1.0.48/dist/css/global-header-placeholder.min.css">

No extra Javascript is required. Once the widget loads (and the DOM element with .vlw class is present) the placeholder gets hidden via an adjacent selector in CSS.