Social media
The plan, the posts and the replies, every month, for one channel or three.
- Content plan
- Posting
- Community
- Reports
From 4.5 m a month
Block Cards
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.
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
tone
density
Measured
JavaScript of its own
0 B
CSS 18.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
Baseline · newly available
Chrome 105 · Firefox 121 · Safari 15.4; needs has. Elsewhere: the focus ring is drawn on the name instead of around the card.
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/block-cards---
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>Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: motif.
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. |
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-blockcards.ma-blockcards__arrow.ma-blockcards__art.ma-blockcards__body.ma-blockcards__card.ma-blockcards__chips.ma-blockcards__eyebrow.ma-blockcards__foot.ma-blockcards__grid.ma-blockcards__head.ma-blockcards__headline.ma-blockcards__index.ma-blockcards__item.ma-blockcards__link.ma-blockcards__more.ma-blockcards__price.ma-blockcards__text.ma-blockcards__title
Slots
slot="eyebrow"slot="headline"
Reduced motion
The drawing and the arrow stay put; the link underline appears without its sweep.
With ClientRouter
CSS only; nothing to rebind.
Why it is built this way
- 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). See the migration table.
Related
Motif
BackgroundsA drawn picture for a slot that has no photograph yet: a sun over the sea, a split gate, a flower, a grid of tiles, a phone going live, a plate set for dinner, waves under a moon or three shapes.
every browserhover
Case Stack
ProCase studies as a deck: on a wide screen each card holds at the top of the screen while the next slides up over it, and the one underneath shrinks and darkens a little on a scroll-driven timeline; on a phone they follow one another.
Chrome 115 · not Firefox · Safari 26scrollhover
Fixed packages with what they cost: each card names a package and who it suits, gives the price and what it is counted in (or "Price on request", for a business that quotes), lists what is included with a tick in a colour block, can carry a bonus line on that block, and ends in an action that asks about that package.
every browserhover
Sample services
What an imaginary studio does
Brand identity
A name, a mark and the rules that hold them together, for a company that is new or has outgrown its look.
Deliverables
- Logo and mark
- Type and colour
- Guidelines
Websites
Sites designed and built by one team, from the first sketch to the code that ships.
Deliverables
- Design system
- Astro build
- Content model
Product design
Screens for an app or a tool, drawn with the people who will use them and handed over as working components.
Deliverables
- Flows
- Interface
- Components
Motion
The logo in motion, a product film, the interface itself: motion that says one thing each time.
Deliverables
- Motion identity
- Product film
- Interaction specs
What a studio or a freelancer does, as numbered rows at display size that open one at a time: each row names a service, and opens to a short text beside the list of deliverables.
newly · Chrome 131 · Firefox 143 · Safari 18.4clickhover
Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown