# Room Cards (Moonarc)

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.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/room-cards` (license key required)
- Tier B · category section · trigger scroll, hover
- Readout: `<RoomCards rooms={[{ name, sleeps, beds, price, art: { kind, seed } }]} />`
- Browser support: widely (every browser); elsewhere: nothing to fall back from
- Measured cost: 0 B JS of its own · uses Reveal + runtime (with dependencies 3.0 kB raw; CSS 15.2 kB raw)
- Page: https://moonarc.dev/components/room-cards/

## Props

| 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. |

## Usage

```astro
---
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 } },
  ]}
/>
```

## Reduced motion

The cards arrive at once and the lamp switches on without its fade.

## With ClientRouter

CSS and Reveal.

## Craft

- The card is one link with the room's name a heading inside it, so a screen reader lists the rooms by name.
- Sleeps, beds and size sit in one row of facts, the price apart at the foot, so a guest compares across cards line by line.

## Replaces

- Room listing blocks

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/room-cards` with a key in components.json (https://moonarc.dev/account/). Everything it composes is free: room-art, reveal.