Product Art
BackgroundsA product drawn flat, for a shop slot that has no photograph yet: 29 drawings in six sets (clothes, ceramics, coffee, skincare, furniture and objects, bakery).
every browserhover
Footer Label
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.
Live demo
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
columns
Measured
JavaScript of its own
0 B
CSS 9.6 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.
Browser support
Baseline · widely available
every browser.
Install Pro
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/footer-label---
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']}
/>Without a key the registry answers 401 with an upgrade message.
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. |
Theming and overrides
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.
Classes
.ma-label.ma-label__care.ma-label__column.ma-label__columns.ma-label__lines.ma-label__name.ma-label__panel.ma-label__title
Slots
none
Reduced motion
The links' underline appears without its sweep.
With ClientRouter
CSS only; nothing to rebind.
Why it is built this way
- 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). See the migration table.
Related
Footer
ProA site footer: brand and blurb, link columns revealed with a stagger, a legal row, and a dot field fading up from the bottom edge.
every browserscroll
A footer for a studio or a person: a line and the email address to write to, columns of links, and the name set across the whole width at the bottom.
every browserscroll
Visit Card
ProWhere to find a studio, a shop or a counter, as one card in a colour block: a drawn map with a pin, the address with a directions link, the opening hours for the week, the ways to get in touch, and above them a live line that says whether it is open now and until when (or when it opens next), with the time where the place is.
every browserload
Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown