# Notice Band (Moonarc)

The notices a regulated practice owes its readers, set where they are read: first, on a panel of its own in the page's ink, what to do in an emergency with the number as a link; then the rest as short notes, each a title, a sentence and a link (the register it is on, how to complain, that the site gives general information and not advice, the access to the building). A band above the footer on every page, or the whole of a notices page. Zero JavaScript.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/notice-band` (license key required)
- Tier B · category section · trigger scroll
- Readout: `<NoticeBand emergency={{ title, text, action }} notices={[{ title, text, href }]} />`
- Browser support: widely (every browser); elsewhere: nothing to fall back from
- Measured cost: 0 B JS (CSS 10.3 kB raw)
- Page: https://moonarc.dev/components/notice-band/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `emergency` | `{ title; text; action?: { href; label } }` | none | What to do in an emergency, first in the band, inverted from the page. |
| `notices` | `{ title; text; href?; label? }[]` | none | The other notices, each with an optional link (its label, or the title). |
| `headline` | `string` | none | A heading; without one the band is named by label and its notices take the heading's level. |
| `eyebrow` | `string` | none | A short line above the heading. |
| `label` | `string` | `'Notices'` | The band's accessible name when it has no heading. |
| `level` | `1 | 2 | 3` | `2` | Heading level of the heading. |
| `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 NoticeBand from '@/components/moonarc/pro/NoticeBand.astro';
---
<NoticeBand
  emergency={{ title: 'In an emergency', text: 'Call the emergency number. Out of hours, the dental helpline answers.', action: { href: 'tel:999', label: 'Call 999' } }}
  notices={[
    { title: 'Registered', text: 'Every dentist here is on the dental register.', href: 'https://example.com/register', label: 'Check the register' },
    { title: 'Complaints', text: 'Tell us first; we answer within ten working days.', href: '/notices/#complaints', label: 'How to complain' },
  ]}
/>
```

## Reduced motion

The emergency panel arrives at once.

## With ClientRouter

CSS and Reveal.

## Craft

- The emergency panel takes the page's ink and paper swapped, so it is the darkest thing in a light band and the lightest in a dark one.
- The number is a tel: link written as it is dialled, at a 44 px target.
- Without a heading the band is a named region and its notices are headings at the band's level, so they stay in the outline.

## Replaces

- Disclaimer banners

## Source

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