.q2w-header

Header

Floating brand bar with logo, title, optional subtitle, and right-aligned action buttons. q2w-mapcss ships multiple real header styles for dashboards, technical maps, and public-facing qgis2web exports.

Variants

Default

Zoning atlas

Kelurahan parcels and valuation layers

<div class="q2w-header">
  <div class="q2w-header__brand">
    <div class="q2w-header__logo">q2</div>
    <div>
      <div class="q2w-header__title">Zoning atlas</div>
      <div class="q2w-header__sub">Kelurahan parcels and valuation layers</div>
    </div>
  </div>
  <div class="q2w-header__actions">
    <button class="q2w-btn q2w-btn--icon">?</button>
    <button class="q2w-btn q2w-btn--primary">Share</button>
  </div>
</div>

.q2w-header--bar

Regional dashboard

Full-width top chrome

<div class="q2w-header q2w-header--bar">...</div>

.q2w-header--minimal

Minimal locator map

<div class="q2w-header q2w-header--minimal">
  <div class="q2w-header__brand">
    <div class="q2w-header__title">Minimal locator map</div>
  </div>
</div>

.q2w-header--expressive

Community atlas

Storytelling-friendly rounded shell

<div class="q2w-header q2w-header--expressive">...</div>

.q2w-header--technical

LAYER STATUS MONITOR

EPSG:4326 · live query view

<div class="q2w-header q2w-header--technical">...</div>

.q2w-header--pill-left

SIPETA-style brand pill

Edge-attached public map identity

<div class="q2w-header q2w-header--pill-left">...</div>

.q2w-header--pill-center

Centered Story Map

Narrative WebGIS embed

<div class="q2w-header q2w-header--pill-center">...</div>

.q2w-header--pill-right

Right Pill Header

Toolbar-friendly layout

<div class="q2w-header q2w-header--pill-right">...</div>

Sub-elements

Class	Purpose
`.q2w-header`	Root shell and positioning container
`.q2w-header__brand`	Logo + title block
`.q2w-header__logo`	Small identity badge or initials
`.q2w-header__title`	Primary map title
`.q2w-header__sub`	Optional subtitle / context text
`.q2w-header__actions`	Right-aligned button group

← Overview Footer →