# 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
```sass
@import “~@govflanders/vl-ui-global-header-placeholder/dist/css/global-header-placeholder.min.css”
```
Or link the dist css in your `<head>`
```css
<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.
```html
<div class=“vl-global-header-placeholder”></div>
```

#### Modifiers
Have a secondary (gray) bar with breadcrumb and/or search as well? Use:
```html
<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.
```html
<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.
