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
Product Drop
The next batch, as one colour block: the product drawn large (ProductArt) under a round date stamp, and beside it the heading, a line, how many of the batch are spoken for (a count, and a bar that fills as the panel comes into view), three facts in the mono face and two actions. For a small run, a pre-order, a seasonal bake or a restock. Zero JavaScript.
Live demo
Next firing
The tall vase, back in three glazes
The kiln opens again in three weeks. Reserve one now and it is set aside for you.
15 of 24 spoken for
- Price
- $86
- Height
- 32 cm
- Pay
- On collection
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
density
Measured
JavaScript of its own
0 B
CSS 16.9 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.
Browser support
Limited availability
Chrome 115 · not Firefox · Safari 26; needs scroll-timeline. Elsewhere: the bar stands at its value.
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/product-drop---
import ProductDrop from '@/components/moonarc/pro/ProductDrop.astro';
---
<ProductDrop
eyebrow="Next firing"
copy="The kiln opens again in three weeks. Reserve one now and it is set aside for you."
product={{ name: 'Tall vase', art: 'vase', colour: 'var(--ma-block-2)' }}
stamp={{ top: 'Firing 09', bottom: 'Late November' }}
batch={{ made: 24, taken: 15 }}
facts={[{ label: 'Price', value: '$86' }, { label: 'Pay', value: 'On collection' }]}
primary={{ href: '/pieces/tall-vase/#reserve', label: 'Reserve one' }}
>
<span slot="headline">The tall vase, <em>back in three glazes</em></span>
</ProductDrop>Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: product-art.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
product | { name: string; art: string; colour?: string; accent?: string } | none | The product: its ProductArt drawing and colours, and its name for the picture's label. |
eyebrow | string | none | A short line above the heading. |
headline | string | none | The heading. Slot "headline" wins and may hold an <em>, set in the emphasis face and colour. |
copy | string | none | A line under the heading. |
stamp | { top: string; bottom: string } | none | The round stamp's two lines: the batch above, the date below. Decoration: say the date in the copy too. |
batch | { made: number; taken: number; text?: string } | none | How many the batch makes and how many are spoken for; text is the count's sentence with {taken} and {made}. |
facts | { label: string; value: string }[] | none | Up to three facts in the mono face: the price, a size, how to pay. |
primary | { href: string; label: string } | none | The main action, e.g. to the product's pre-order form. |
secondary | { href: string; label: string } | none | The second action, outlined. |
block | 1 | 2 | 3 | 4 | 5 | 5 | The colour block the panel paints. |
level | 2 | 3 | 2 | Heading level. |
density | 'compact' | 'cozy' | 'roomy' | 'cozy' | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |
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-art.ma-drop.ma-drop__actions.ma-drop__art.ma-drop__batch.ma-drop__btn.ma-drop__btn--primary.ma-drop__btn--secondary.ma-drop__copy.ma-drop__count.ma-drop__eyebrow.ma-drop__facts.ma-drop__headline.ma-drop__meter.ma-drop__panel.ma-drop__stamp.ma-drop__text
Slots
slot="eyebrow"slot="headline"
Reduced motion
The bar stands at its value.
With ClientRouter
CSS only; nothing to rebind.
Why it is built this way
- The count is text and the bar is a picture of the same number, hidden from assistive technology, so nothing is read twice.
- The bar fills on the panel's view timeline to its share and stops there; scrolling back empties it again.
- The stamp sits a little crooked inside a dashed ring, the way a date is stamped by hand, and is hidden from screen readers: the copy says the date.
- The panel takes its block's action pair, so the primary button reads on any colour the palette gives it.
Replaces: Pre-order banners (Shopify apps) · Product launch sections. See the migration table.
Related
Block CTA
ProThe closing call on a colour block: a short line, a large heading that ends on a phrase in the emphasis face, a sentence and two pill actions, on one of the palette's blocks with a drawing (Motif) rising out of its lower corner.
every browserscrollhover
Firing 08 is on the shelf
Clay for the table, thrown slowly
Cups, bowls and vases thrown by hand and fired a few dozen at a time.
- Fired
- Every six weeks
- Batch
- About 120 pieces
- Made by
- Two pairs of hands
Tall vase32 cm · StonewarePrice: $86
Morning cup300 ml · Two glazesPrice: $24
Breakfast bowl16 cm · Speckled clayPrice: $32
The first screen of a maker's site: the heading, a line, two actions and three facts on one side; on the other, the products themselves, each drawn on its plate (ProductArt) with its name, a spec line in the mono face and its price.
newly · Chrome 105 · Firefox 121 · Safari 15.4loadclick
Tall vase
Price: $86
A tall vase for branches and long stems, thrown in two parts and joined at the shoulder.
9 of 24 left in this batch
- Size
- 32 cm tall, 14 cm across
- Clay
- Speckled stoneware
- Care
- Wash by hand
Delivery
Wrapped in paper and card, and sent the week after it comes out of the kiln.
The top of a product's page: the product drawn large on its plate (ProductArt), with its colourways under it as small swatches (radio buttons) that recolour the drawing in place; beside it the trail back to the shop, the name, the price, a line, how many of the batch are left, two actions, the specifications in the mono face and a few notes that open (care, delivery).
newly · Chrome 105 · Firefox 121 · Safari 15.4click
Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown