The first screen of a place to stay: the headline and a line of what the place is, a few facts, and the place by day and by night in one frame: light falling over the day picture (LightRays), the windows lit in the night one, and a pair of radios under them that picks which shows, with no script. The pictures are drawn by HomeArt unless the slots day and night hold photographs; the one not shown is hidden from a screen reader. The slot booking holds the dates and the guests (BookingBar), under the picture and its radios.
A guesthouse by the sea, made up for this demo
Seven rooms in an old captain's house, the beach six minutes down the lane. Sample prices.
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
JavaScript of its own
0 B
CSS 17.2 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.
Browser support
every browser. Elsewhere: nothing to fall back from.
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/hero-stay---
import HeroStay from '@/components/moonarc/pro/HeroStay.astro';
---
<HeroStay
eyebrow="A villa above the bay"
copy="Four bedrooms, a pool and the sea ten minutes down the path."
facts={[{ value: '4', label: 'bedrooms' }, { value: '10 min', label: 'to the sea' }]}
art={{ kind: 'villa', seed: 'casa alta', block: 2 }}
dayLabel="The villa at noon, its pool in the sun"
nightLabel="The villa at night, its windows lit"
>
<span slot="headline">A house for the <em>long</em> evenings</span>
<BookingBar slot="booking" engine="https://book.example.com/casa-alta" />
</HeroStay>Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: home-art, light-rays, reveal.
| Prop | Type | Default | Description |
|---|---|---|---|
headline | string | none | The heading. Slot "headline" wins and may hold an <em>. |
eyebrow | string | none | A short line above the heading. |
copy | string | none | A line under the heading. |
facts | { value; label }[] | none | A few figures under the line. |
primary | { href; label } | none | The first action. |
secondary | { href; label } | none | The second. |
art | { kind?; seed?; block?; colour?; accent? } | { kind: 'villa' } | The place drawn by HomeArt when the slots hold no photograph. |
dayLabel | string | none | What the day picture shows, for a screen reader. |
nightLabel | string | none | What the night picture shows. |
words | { day?; night?; pick? } | By day, By night, The place | The radios' words and their group's name. |
level | 1 | 2 | 1 | Heading level of the headline. |
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. |
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.
.ma-hstay.ma-hstay__actions.ma-hstay__copy.ma-hstay__eyebrow.ma-hstay__facts.ma-hstay__frame.ma-hstay__headline.ma-hstay__inner.ma-hstay__media.ma-hstay__pic.ma-hstay__pic--day.ma-hstay__pic--night.ma-hstay__primary.ma-hstay__radio.ma-hstay__radio--night.ma-hstay__secondary.ma-hstay__tab.ma-hstay__time
slot="headline"slot="day"slot="night"slot="booking"
The rays stand still and the pictures change at once.
ClientRouterCSS and Reveal.
Replaces: Hotel landing heroes with a booking widget. See the migration table.
A 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.
Soft beams of light falling from the top edge or a top corner over whatever is behind them: a fan of blurred gradients, each a little wider, brighter or slower than the next, swaying a few degrees on its own clock and blended as light (screen).
The dates and the guests of a stay, handed to the place's own booking engine: a form that sends them to the engine's address as the parameters it reads (check-in, check-out, adults, children, and any fixed ones, such as the property's id), so a guest lands on the engine's page with the search filled in.
The rooms of a place to stay as cards: each drawn by RoomArt on a colour block, with its name, how many it sleeps, its beds and its size, what it has (a terrace, a bath, a sea view), a sentence about it and its price from a night, the whole card a link to book it or to its page.
Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown