# Footer Label (Moonarc)

The foot of a maker's site, made like the label sewn into what they make: a panel in a colour block with a stitched edge, the name large (a second part in the emphasis face), the link columns, a row of care symbols drawn as line icons with their words (how to wash it, that it goes in the oven, that it is mended for free) and a few small lines in the mono face. Zero JavaScript.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/footer-label` (license key required)
- Tier B · category section · trigger hover
- Readout: `<FooterLabel name="Sitename" nameEm="studio" care={[{ icon, label }]} />`
- Browser support: widely (every browser)
- Measured cost: 0 B JS (CSS 9.6 kB raw)
- Page: https://moonarc.dev/components/footer-label/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `name` | `string` | none | The name, set large in the display face. |
| `nameEm` | `string` | none | A second part of the name, set in the emphasis face and colour after a space. |
| `columns` | `{ title: string; links: { href: string; label: string }[] }[]` | none | The link columns, each a nav named by its title. |
| `care` | `{ icon: 'wash' | 'hand' | 'iron' | 'air' | 'oven' | 'dishwasher' | 'mend' | 'recycle' | 'leaf' | 'cold'; label: string }[]` | none | Care symbols with their words, a list named by careLabel. |
| `lines` | `string[]` | none | Small lines at the foot, in the mono face: where it is made, the year. |
| `careLabel` | `string` | `'Care'` | Accessible name of the care symbols' list. |
| `block` | `1 | 2 | 3 | 4 | 5` | `5` | The colour block the panel paints. |

## Usage

```astro
---
import FooterLabel from '@/components/moonarc/pro/FooterLabel.astro';
---
<FooterLabel
  name="Sitename"
  nameEm="studio"
  columns={[{ title: 'Explore', links: [{ href: '/pieces/', label: 'Pieces' }, { href: '/visit/', label: 'Visit' }] }]}
  care={[{ icon: 'dishwasher', label: 'Dishwasher safe' }, { icon: 'mend', label: 'Chips mended' }]}
  lines={['Thrown by hand', 'Fired in small batches']}
/>
```

## Reduced motion

The links' underline appears without its sweep.

## With ClientRouter

CSS only; nothing to rebind.

## Craft

- The stitched edge is a dashed border a little inside the panel's own, with a radius that follows it, so the corners stay parallel.
- The care symbols are drawn on a 24-unit grid as strokes, like the symbols printed on a sewn label, and every one carries its words: an icon alone is a guess.
- Each link column is a nav named by its title, so a screen reader lists them by name.

## Replaces

- Footers (Framer templates)

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/footer-label` with a key in components.json (https://moonarc.dev/account/).