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.
Call the emergency number. Out of hours, the dental helpline tells you where to go.
Call 999Every dentist here is on the dental register.
Check the registerTell us first: we answer within ten working days.
How to complainThis site gives general information. Advice is given in the chair.
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 10.3 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/notice-band---
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' },
]}
/>Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: reveal.
| 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. |
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-notices.ma-notices__body.ma-notices__call.ma-notices__eyebrow.ma-notices__head.ma-notices__headline.ma-notices__inner.ma-notices__item.ma-notices__link.ma-notices__list.ma-notices__text.ma-notices__title.ma-notices__urgent.ma-notices__urgent-text.ma-notices__urgent-title
none
The emergency panel arrives at once.
ClientRouterCSS and Reveal.
Replaces: Disclaimer banners. See the migration table.
Short answers. The long ones are in the docs.
For 83 of 125, yes, measured from a build.
Yes, verified on Astro 5, 6 and 7.
No.
A heading and lead beside a native accordion: one question open at a time, heights animated by the browser, keyboard and screen reader handled by <details>.
A site footer: brand and blurb, link columns revealed with a stagger, a legal row, and a dot field fading up from the bottom edge.
A service's own page, top to bottom: its name and what it is in a sentence, then the parts a reader looks for before booking (what it is, who it is for, what happens step by step, what to bring, what comes after), each under its own heading; beside them a card that stays in view while the page scrolls (position: sticky, nothing animated) with the facts (how long, from what price, whether insurance covers it), the two actions and a line of small print.
Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown