# House Rules (Moonarc)

What a guest agrees to before they come, set out to be read: the arrival and departure times large, the house rules as a list where each answer is a word with a mark that repeats it in shape (a tick, a cross), what the stay includes, and the policies in a sentence or two each: cancelling, a deposit, a late arrival. Zero JavaScript.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/house-rules` (license key required)
- Tier B · category section · trigger scroll
- Readout: `<HouseRules times={[{ label, value }]} rules={[{ label, value, allowed }]} />`
- 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 10.1 kB raw)
- Page: https://moonarc.dev/components/house-rules/

## 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. |
| `times` | `{ label; value }[]` | none | The arrival and departure, set large. |
| `rules` | `{ label; value; allowed? }[]` | none | The rules; allowed puts a tick or a cross before the value, which says it in words. |
| `included` | `{ label; items: string[] }` | none | What the stay includes. |
| `policies` | `{ title; text }[]` | none | The policies, a sentence or two each. |
| `rulesLabel` | `string` | `'House rules'` | The rules' heading. |
| `level` | `1 | 2 | 3` | `2` | Heading level of the heading; the parts are 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 HouseRules from '@/components/moonarc/pro/HouseRules.astro';
---
<HouseRules
  headline="Before you come"
  times={[{ label: 'Arrive from', value: '15:00' }, { label: 'Leave by', value: '11:00' }]}
  rules={[{ label: 'Pets', value: 'Welcome', allowed: true }, { label: 'Smoking', value: 'Outside only', allowed: false }]}
  included={{ label: 'Included', items: ['Breakfast', 'Towels and linen'] }}
  policies={[{ title: 'Cancelling', text: 'Free up to 14 days before you arrive; after that, half the stay.' }]}
/>
```

## Reduced motion

Nothing here moves but the Reveals, which hold still on their own.

## With ClientRouter

CSS and Reveal.

## Craft

- Each rule's answer is a word; the tick or the cross before it is a mask in the text's colour, so it repeats the word in shape and never carries it alone.
- The rules are a description list, so a screen reader reads each label with its answer.

## Replaces

- House rules blocks

## Source

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