Principles About

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/about/about48.tsx instead.

Usage

The file also exports about48Demo, 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 { About48, about48Demo } from "@/components/blocks/about/about48";

export default function Page() {
  return <About48 {...about48Demo} />;
}

Props

Types

type Principle = { title: string; description: string };

type ButtonItem = {
  label: string;
  href?: string;
  variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
};

Behavior notes

• Unlike About6, which pairs the numbered principles list with a plain heading-only column, About48 adds a photo and a sticky (lg:sticky lg:top-24) left column so the image and statement stay pinned in the viewport as the principles list scrolls past.
• The principles list here is a simple vertical stack separated by top borders, distinct from About12's four-column card grid; About48 favors a long-form read over a scannable grid of short steps.
• buttons is optional and lives inside the pinned column rather than below the full list, so the CTA is always visible alongside the statement even on a long principles list, unlike About1 where buttons sit at the very bottom of the section.