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.