Skip to content
v1.0
Blocks

Parcel panel

GRIDD's core surface: a floating panel over the map on desktop, a drag bottom-sheet on mobile — the same three-tab spine everywhere.

What it is made of

  • GdCard flush at --gd-size-panel (400px) — the shell
  • GdTabs — the three-tab spine, one tab carrying a badge
  • GdMetricCard — lot area, zone
  • GdVerdictBanner — the answer, with its authorities and time
  • GdListRow — overlays as swatched rows, title records as muted chips
  • GdButton icon and GdChip — save, and the on-title marker

The three-tab spine

  • Overview — the address, the lot facts, the zoning, and the verdict for the chosen use.
  • Constraints — what is on the land: mapped overlays as swatched rows, on-title records as muted chips.
  • Build — the live checker, with the verdict banner pinned beneath the sliders.

The block

42 Jarrah Street

L14 RP80432 · Millbrook
Lot area
812m²
Zone
LDR
Low-density residential
Building + council

A granny flat here is a standard council check against the written rulebook.

Decided by Riverton City Council Typically 6–12 weeks
Switch tabs. Every part is a documented component — the panel adds arrangement and nothing else.
Code 
<GdCard flush class="panel">
  <header class="panel__head">
    <h2>42 Jarrah Street</h2>
    <GdCode>L14 RP80432 · Millbrook</GdCode>
    <GdButton icon size="sm" variant="ghost" label="Save this parcel">…</GdButton>
  </header>

  <GdTabs v-model="tab" :tabs="TABS" label="Parcel sections" />

  <!-- Overview -->
  <GdMetricCard label="Lot area" value="812" unit="m²" />
  <GdMetricCard label="Zone" value="LDR" sub="Low-density residential" />
  <GdVerdictBanner
    title="Building + council"
    :required="['building', 'council']"
    decided-by="Riverton City Council"
    time="6–12 weeks"
  >
    A granny flat here is a standard council check against the written rulebook.
  </GdVerdictBanner>

  <!-- Constraints: a MAPPED overlay gets the swatch the map drew … -->
  <GdListRow title="Creek flooding" sub="Rear of lot · mapped overlay">
    <template #swatch><span class="sw" :style="{ background: overlay.paint }" /></template>
  </GdListRow>

  <!-- … an ON-TITLE record, which is not drawn, gets a muted chip instead -->
  <GdListRow title="Registered easement" sub="On title · not drawn on the map">
    <template #trailing><GdChip tone="muted" size="sm">On title</GdChip></template>
  </GdListRow>
</GdCard>

Rules

  • Keep the same three tabs everywhere. Overview, Constraints, Build — on the desktop panel and in the mobile sheet.
  • Lead every section in plain English; let the statutory term follow as a chip.
  • Give a mapped overlay a swatch and an on-title record a muted chip. The two are different kinds of fact and must not look alike.
  • Compose only from documented components. If the panel needs a shape the system lacks, that is a finding about the system.
  • Pin the verdict banner beneath the Build tab's sliders. It never scrolls away.
  • Leave the sheet gesture to the app. The map app owns the drag; the contents are exactly these.

Behavior & Anatomy

The panel is an arrangement, not a new thing

Tabs, metric cards, list rows, the approval stack, the verdict banner — every part is documented on its own page. What this block contributes is the order they go in, and that is the only thing here that could not have been written down anywhere else.

Why the spine does not change between desktop and mobile

On mobile the panel becomes a drag bottom-sheet. The sheet mechanics are an app concern — the map app owns the gesture — while the contents are exactly these. A phone that reordered or dropped a tab would be a second information architecture to keep true, and the person switching devices is usually the same person mid-task.

Where the working panel lives

The full one lives in the design project's SidePanels.dc.html exploration; the composition above is the docs-scale statement of it. The difference is width and demo data, not structure.

Navigate

Esc