# Block Cards (Moonarc)

What is on offer, as colour blocks: each card paints one of the palette's blocks and carries a drawing in its corner (Motif), an index, a name, a line, chips for what it includes and a foot with a price and a round arrow. With layout="feature" the first card is twice as tall and stands beside the others. The card's name is its link, stretched over the card; a hover or the keyboard focus anywhere on it moves the drawing and turns the arrow. Zero JavaScript.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/block-cards` (license key required)
- Tier B · category section · trigger hover
- Readout: `<BlockCards cards={[{ href, title, text, chips, price }]} />`
- Browser support: newly (Chrome 105 · Firefox 121 · Safari 15.4); elsewhere: the focus ring is drawn on the name instead of around the card
- Measured cost: 0 B JS (CSS 18.3 kB raw)
- Page: https://moonarc.dev/components/block-cards/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `cards` | `{ href, title, text?, chips?, price?, index?, motif?, block? }[]` | none | The offers, in order. Each paints a block (the five in turn when unset); motif names its drawing (one is picked from the title when unset); index replaces the 01, 02 … in its corner. |
| `layout` | `'feature' | 'even'` | `'feature'` | feature: the first card spans the others' rows beside them (three cards fill it best); even: one grid. |
| `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. |
| `more` | `{ href: string; label: string }` | none | A link beside the heading, e.g. to every service with its prices. |
| `chipsLabel` | `string` | `'Includes'` | Accessible name of each card's chips. |
| `level` | `2 | 3` | `2` | Heading level of the section's heading; the cards' names are one below. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The section's ground; the cards keep their blocks on every tone. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import BlockCards from '@/components/moonarc/pro/BlockCards.astro';
---
<BlockCards
  eyebrow="Services"
  more={{ href: '/services/', label: 'All services and prices' }}
  cards={[
    { href: '/services/social/', title: 'Social media', text: 'The plan, the posts and the replies, every month.', chips: ['Content plan', 'Posting', 'Reports'], price: 'From 4.5 m a month', motif: 'phone' },
    { href: '/services/shoots/', title: 'Shoots', text: 'Photo and video days for a menu, a room or a launch.', chips: ['Photo', 'Video'], price: 'From 2.5 m a day', motif: 'sun' },
    { href: '/services/design/', title: 'Design', text: 'Menus, posters and the sets a feed is made of.', chips: ['Menus', 'Posters'], price: 'From 1.2 m', motif: 'shapes' },
  ]}
>
  <span slot="headline">Book one shoot, or hand us <em>the whole month.</em></span>
</BlockCards>
```

## Reduced motion

The drawing and the arrow stay put; the link underline appears without its sweep.

## With ClientRouter

CSS only; nothing to rebind.

## Craft

- The name is the link and its ::after covers the card: a reader hears one link with the name, then the chips as a list, instead of the whole card read as one long link.
- The arrow points up and out at rest and straightens on hover: it says "goes somewhere" before it is touched.
- A drawing per card, in the block's own two drawing colours, stands in for the photograph a business adds later: the grid looks finished from the first build.
- The feature card spans the others' rows, so its drawing can be twice the size and the eye starts there.

## Replaces

- Services grids (Framer agency templates)

## Source

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