vcl-app-header

The area on the top of an app, usually containing a brand mark and the main navigation

Usage no npm install needed!

<script type="module">
  import vclAppHeader from 'https://cdn.skypack.dev/vcl-app-header';
</script>

README

VCL app-header

The area on the top of an app, usually containing a brand mark and the main navigation.

Features

The header area is usually above the content area or in ARIA terms, the area containing an element with banner and navigation role. This module introduces a corresponding class which can be used to set colors for this area.

Usage

A simple header area:

basic example

Classes

Classes

  • vclApplicationHeader
  • vclAppName

Modifiers

Variables

  • --app-header-color
  • --app-header-bg-color
  • --app-header-logo-max-width

Demo

example.html on GH-pages.