.q2w-header

Header

Floating brand bar with logo, title, optional subtitle, and right-aligned action buttons.

Preview

Land Atlas — Cirebon

Sistem Informasi Peta Tematik

Usage

Use this component inside a qgis2web Leaflet export after loading q2w-mapcss.css. Keep generated map JavaScript unchanged unless your workflow needs custom behavior.

<div class="q2w-header">
  <div class="q2w-header__brand">
    <div class="q2w-header__logo">q2</div>
    <div>
      <div class="q2w-header__title">Map Title</div>
      <div class="q2w-header__sub">Subtitle</div>
    </div>
  </div>
  <div class="q2w-header__actions">
    <button class="q2w-btn q2w-btn--icon">?</button>
  </div>
</div>

Variants

Pattern	Effect
`.q2w-header`	Default component shell
`.q2w-header--compact`	Denser layout for small maps
`.q2w-header--floating`	Floating map overlay style
`data-theme="dark"`	Uses dark theme tokens automatically

Sub-elements

Class	Purpose
`.q2w-header`	Root element for the header component
`.q2w-header__head`	Optional header/title region
`.q2w-header__body`	Main component content region
`.q2w-header__actions`	Optional action group

← Overview Footer →