A row of panels where the one pointed at or focused widens and shows its words, and the others narrow to a strip with their title turned up the side.
every browserpointerhover
Area Panels
The neighbourhoods an agency sells in, as ExpandingPanels: each area a panel with its street drawn by HomeArt, its starting price over its name and a line about it, widening as it is pointed at or focused; under the row the same areas with a few figures each, so the figures are read in order. Zero JavaScript.
Live demo
Where we sell
Four neighbourhoods of a made-up city. Sample figures.
Old Harbour
- Median price
- $560,000
- To the station
- 12 minutes
Linden Hill
- Median price
- $790,000
- To the station
- 10 minutes
Market Quarter
- Median price
- $505,000
- To the station
- 6 minutes
Southbank
- Median price
- $710,000
- To the station
- 15 minutes
Live, from the library itself, at full size: scroll, hover, navigate away and back. The demo is never gated.
Variants · each row writes the attribute the prop writes; the section's own CSS answers
tone
density
Measured
JavaScript of its own
0 B
Uses Reveal and the shared runtime (1.9 kB raw, once per site). With those included: 3.0 kB raw.
CSS 16.7 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.
Browser support
Baseline · widely available
Chrome 105 · Firefox 110 · Safari 16; needs container-units. Elsewhere: without container queries the panels stack, each one whole.
Install Pro
The demo above is never gated; the source is. With a key in components.json (see account), the registry serves it like any other item:
npx shadcn@latest add @moonarc-pro/area-panels---
import AreaPanels from '@/components/moonarc/pro/AreaPanels.astro';
---
<AreaPanels
headline="Where we sell"
areas={[
{ name: 'Old Harbour', meta: 'From $480,000', text: 'Warehouse flats by the water.', href: '/areas/old-harbour/', art: { kind: 'apartment', seed: 'Old Harbour', block: 3 }, facts: [{ label: 'Median', value: '$560,000' }] },
{ name: 'Linden Hill', meta: 'From $690,000', text: 'Family houses, two schools.', href: '/areas/linden-hill/', art: { kind: 'house', seed: 'Linden Hill', block: 2 }, facts: [{ label: 'Median', value: '$810,000' }] },
]}
/>Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: expanding-panels, home-art, reveal.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
areas | { name; meta?; text?; href?; art; facts? }[] | none | Two to six areas. art is HomeArt's kind, seed, time and block; facts are listed under the row. |
open | number | 1 | The panel wide while nothing is pointed at, from 1. |
label | string | 'Areas' | What the panels are, read before them. |
headline | string | none | The heading. |
eyebrow | string | none | A short line above the heading. |
copy | string | none | A line under the heading. |
level | 1 | 2 | 3 | 2 | Heading level of the heading; each area's name in the figures is one below. 1 under a page's own heading when the panels have none. |
tone | 'surface' | 'muted' | 'ink' | 'brand' | unset (paints nothing) | The section's ground. |
density | 'compact' | 'cozy' | 'roomy' | 'cozy' | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |
Theming and overrides
The section reads the theme contract (shadcn's variable names with the base tokens as fallback), so a pasted theme or one --ma-brand recolours it. Its class names are the override surface and stay stable; a named slot replaces the matching prop with your own markup.
Classes
.ma-areas.ma-areas__copy.ma-areas__eyebrow.ma-areas__facts.ma-areas__head.ma-areas__headline.ma-areas__inner.ma-areas__name
Slots
slot="headline"
Reduced motion
A panel widens at once.
With ClientRouter
CSS and Reveal.
Why it is built this way
- The panels are ExpandingPanels, each drawing passed into its slot by name: a slot named in a loop is not one Astro fills, so six lines name six slots.
- The open area is drawn at dusk, the others by day, so the row has one place to look first.
- The figures are a list under the row, so a screen reader reads each area's figures in order whatever is wide.
Replaces: Area guide sections with a photo per neighbourhood. See the migration table.
Related
Home Art
BackgroundsA building drawn flat, for a listing that has no photograph yet: a house, a terrace, an apartment block, a villa, a cabin, a tower, an office or a shop, in the colour of the block or tone it sits on, with a shade, a light and the windows mixed from it.
every browserpointer
Homes for sale
Pick a kind and the least bedrooms: the cards filter with no script. Sample homes and prices.
6 homes6 homes5 homes3 homes2 homes3 homes3 homes3 homes3 homes2 homes3 homes3 homes2 homes0 homes0 homes
No home matches. Try fewer bedrooms or another kind.No home matches. Try fewer bedrooms or another kind.
Listing Grid
ProHomes as cards (the building drawn by HomeArt, the price, the address, the beds, the baths and the area) with filters that work with no script: a group of radios for the kind of home and one for the least bedrooms, and :has() rules written for the list at build hide every card that does not match.
newly · Chrome 105 · Firefox 121 · Safari 15.4clickscroll
Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown