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. The drawing's lamp comes on when the card is pointed at. Zero JavaScript.
Point at a room: its lamp comes on. 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
Uses Reveal and the shared runtime (1.9 kB raw, once per site). With those included: 3.0 kB raw.
CSS 15.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/room-cards---
import RoomCards from '@/components/moonarc/pro/RoomCards.astro';
---
<RoomCards
headline="The rooms"
rooms={[
{ name: 'Garden double', sleeps: 2, beds: 'One double bed', size: '22 m²', features: ['Garden door', 'Shower'], price: '€140', href: '#book', art: { kind: 'double', seed: 'garden', block: 2 } },
]}
/>Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: room-art, 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. |
rooms | { name; sleeps; beds?; size?; text?; features?; price?; href?; art }[] | none | The rooms; art is RoomArt's kind, seed, time and block. |
words | { sleeps?; from?; per? } | Sleeps {n}, From {price}, a night | The card's words. |
columns | 2 | 3 | 3 | Cards a row on a wide screen. |
level | 1 | 2 | 3 | 2 | Heading level of the heading; each room is one below. |
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-rooms.ma-rooms__art.ma-rooms__body.ma-rooms__card.ma-rooms__copy.ma-rooms__eyebrow.ma-rooms__facts.ma-rooms__features.ma-rooms__head.ma-rooms__headline.ma-rooms__inner.ma-rooms__item.ma-rooms__list.ma-rooms__name.ma-rooms__price.ma-rooms__text
slot="headline"
The cards arrive at once and the lamp switches on without its fade.
ClientRouterCSS and Reveal.
Replaces: Room listing blocks. See the migration table.
A room drawn flat, for a stay that has no photograph of it yet: a single, a double, a twin, a suite, a family room, a bunk room or a loft, in the colours of the block or tone it sits on, with a shade, a light and a pale tone mixed from them.
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.
What a practice charges, as tables a reader can trust: one a group, each row a service, its price and a note, and where insurance applies a column that says in words whether it is covered, partly or not, with a mark that repeats it in shape.
Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown