.q2w-popup

Popup

Feature popup with accent header, rich media, tabs, technical states, and SIPETA-inspired governmental styling for official public WebGIS exports.

Variants

Tabular default

Parcel ZNT
Block 03 / Zone B
NIR1.250.000
ClassResidential
Area4.2 ha
<div class="q2w-popup">
  <div class="q2w-popup__header">...</div>
  <div class="q2w-popup__body">
    <div class="q2w-attr">...</div>
  </div>
</div>

Rich media

Survey point
Photo attachment
image preview
StatusVerified
<div class="q2w-popup">
  <div class="q2w-popup__header">...</div>
  <div class="q2w-popup__media">image preview</div>
</div>

Tabbed popup

Feature details
Tabbed popup body
StatusVerified
Updated2026-05-04
AnalystSurvey team
<div class="q2w-tabs">
  <div class="q2w-tab q2w-tab--active">Attributes</div>
  <div class="q2w-tab">History</div>
</div>

.q2w-popup--minimal

Minimal popup
Quiet information display
ValueLow
<div class="q2w-popup q2w-popup--minimal">...</div>

.q2w-popup--technical

TECH ATTRIBUTES
FID 1042
EPSG4326
<div class="q2w-popup q2w-popup--technical">...</div>

.q2w-popup--expressive

Expressive popup
Rounded, story-map friendly
PriorityHigh
<div class="q2w-popup q2w-popup--expressive">...</div>

.q2w-popup--striped

Striped rows
Dense government tables
ZoneA
NIR2.050.000
RoadPrimary
<div class="q2w-popup q2w-popup--striped">...</div>

With chart

Mekarjaya
5-year land value trend
Δ 5y+62%

.q2w-popup--status

Active parcel
Status indicator in header
StatusOK
<div class="q2w-popup q2w-popup--status" data-status="ok">...</div>

.q2w-popup--governmental

Official valuation record
Navy header with teal accent strip
StatusPublished
<div class="q2w-popup q2w-popup--governmental">...</div>

Adapter modifiers

ClassPurpose
.q2w-governmentalApply to a Leaflet popup container when generated table headers need the governmental navy style.
.q2w-popup--stripedUse on framework popup markup for alternating attribute row backgrounds.
← Legend Tooltip →