Two-Up Capability Cards

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, media-slot dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/feature/feature11.tsx instead.

Usage

The file also exports feature11Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Feature11, feature11Demo } from "@/components/blocks/feature/feature11";

export default function Page() {
  return <Feature11 {...feature11Demo} />;
}

Props

Types

interface Feature11Card {
  kicker: string;
  title: ReactNode;
  image?: { src: string; alt: string };
  liveAsset: { label: string; value: string };
  items: string[];
  action: { label: string; href: string };
}

Behavior notes

• The liveAsset badge on each card's image tile is a static demo value, not a real live feed.
• Each card's action button renders as a plain link (Button with render={<Link/>}); there is no real navigation wired up beyond the href you pass.
• cards renders in a 2-column grid on md and above and stacks to a single column below that; passing more than two cards still works, they simply wrap.