Deliverable Cards With MediaPRO

Feature251: Deliverable Cards With Media

Three soft cards, each pinning a live interface piece over a dotted field before the copy starts. The label, statement, paragraph and a ruled fact line sit underneath, so every card shows the thing it describes.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/feature251?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/feature251?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/feature251.tsx, the toolbar7, shapes49 and card23 pieces the demo pins into the cards, and the badge7 eyebrow it uses.

Quick start

The installed file exports feature251Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.

import { Feature251, feature251Demo } from "@/components/beste/block/feature251";

export default function Page() {
  return <Feature251 {...feature251Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Feature251 } from "@/components/beste/block/feature251";
import { Shapes49 } from "@/components/beste/piece/shapes49";
import { Toolbar7 } from "@/components/beste/piece/toolbar7";

export default function Page() {
  return (
    <Feature251
      badge={{ label: "What lands in your drive" }}
      heading="Three things leave the studio, and all three are yours."
      description="No licence you cannot transfer and no file you cannot open."
      cards={[
        {
          media: <Toolbar7 active="pen" />,
          label: "Working files",
          title: "The drawings, not only the exports",
          description: "Layered sources with the layers actually named.",
          meta: "Handed over on the final day",
        },
        {
          media: <Shapes49 />,
          label: "The system",
          title: "A layout kit your team can extend",
          description: "Components, spacing rules and page templates.",
          meta: "Written for a Tuesday, not a jury",
        },
      ]}
    />
  );
}

Props

type MediaCard = {
  /** Media object shown in the card's dotted field, usually a registry piece */
  media: ReactNode;
  label: string;
  title: string;
  description: string;
  meta: string;
};

Behavior notes

• media is a ReactNode, so any piece fits: the demo uses a toolbar, a shape kit and a contact card, but a browser frame, chart or upload piece drops in without touching the block.
• The media area is marked only by a dotted field, a radial-gradient on currentColor at text-foreground/20, with no second fill and no border, so the card keeps one surface and the pattern follows the theme in light and dark.
• That area is flex-1 with min-h-[220px], so pieces of different heights still leave the copy aligned across the three cards.
• The media is centred rather than stretched, which keeps a small piece from being scaled into something it was not drawn for.
• Cards render as article elements: each one is a self-contained unit rather than a cell in a grid of text.
• The fact line closes each card on a border-current/10 rule, a shade of the card's own surface instead of a hard divider across it.
• The row is a plain md:grid-cols-3 with gap-6, so the cards keep equal width and no horizontal scrolling is involved at any breakpoint.