Principles Card Grid

About64: Principles Card Grid

Principles section with a left-aligned header (eyebrow badge, heading, description) above a three-column grid of bordered cards, each pairing a circular icon with a title and a short explanation. Reads as a studio's short list of non-negotiables rather than a generic feature grid.

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/about64?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/about64.tsx, the badge7 component it uses for the eyebrow badge, and its dependencies.

Quick start

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

import { About64, about64Demo } from "@/components/beste/block/about64";

export default function AboutPage() {
  return <About64 {...about64Demo} />;
}

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

import { Ruler, PenTool, Layers } from "lucide-react";
import { About64 } from "@/components/beste/block/about64";

export default function AboutPage() {
  return (
    <About64
      badge={{ label: "How we think" }}
      heading="Three ideas we do not <strong>compromise on.</strong>"
      description="A short list of convictions that decide what we ship."
      items={[
        {
          icon: Ruler,
          title: "Restraint over decoration",
          description: "Every element earns its place before it lands on the canvas.",
        },
        {
          icon: PenTool,
          title: "Type does the talking",
          description: "A layout that reads well in plain text is worth designing around.",
        },
        {
          icon: Layers,
          title: "Systems, not one-offs",
          description: "We design the rules first, then the screens.",
        },
      ]}
    />
  );
}

Props

type Badge = { label: string };
type About64Principle = { icon: LucideIcon; title: string; description: string };

Behavior notes

• icon is a Lucide icon component reference (e.g. Ruler), not a string enum, so the caller imports and passes the component directly.
• Each card is only bordered on top (border-t), not boxed, so the grid reads as a divided list of rows rather than discrete cards.
• The icon sits in a size-12 circular bg-muted badge above the title, matching the "circular icon" pattern used across the set.
• The grid is a static sm:grid-cols-2 lg:grid-cols-3; it does not recompute column count from items.length, so an odd item count (e.g. 5) leaves a visible gap in the last row on large screens.
• The header block is capped at max-w-3xl and left-aligned, distinct from the centered headers used in other About blocks in this set.