Inset Card About

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its 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/about/about54.tsx instead.

Usage

The file also exports about54Demo, 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 { About54, about54Demo } from "@/components/blocks/about/about54";

export default function Page() {
  return <About54 {...about54Demo} />;
}

Props

Types

type StatItem = { title: string; value: string };

Behavior notes

• The content card uses absolute positioning offset from the photo's bottom-left corner, unlike About10's bento layout where the photo and text card sit in separate grid cells with no overlap.
• stats renders as a single four-column ribbon below the photo, closer in spirit to About14's stats-then-story-card order, but here the stats come after the visual instead of before it.
• photo is required, not optional, since the whole layout is built around the image; MediaSlot's gradient placeholder only appears if a caller omits src within the object rather than the object itself.