Principles About

About48: Principles About

A left column (eyebrow, heading, description, image, CTA) stays pinned in view while a right column lists numbered operating principles that scroll past it, each with a large tabular-numeral index and a title that shifts to the primary color on hover.

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

Base UI flavor

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

This installs the block to components/beste/block/about48.tsx, the badge6 and button1 components it uses for the eyebrow label and CTA button, and its dependencies.

Quick start

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

import { About48, about48Demo } from "@/components/beste/block/about48";

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

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

import { About48 } from "@/components/beste/block/about48";

export default function AboutPage() {
  return (
    <About48
      label="How we operate"
      heading="A team runs on <strong>principles</strong>, not process documents."
      description="Four rules have shaped every engagement since we started."
      button={{ label: "Work with us", href: "https://beste.co" }}
      image={{
        src: "https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=900&h=700&fit=crop",
        alt: "Team mapping ideas on a wall",
      }}
      principles={[
        { title: "Senior hands only", description: "The people in the pitch do the work." },
        { title: "Ship to learn", description: "We put real work in front of users early." },
        { title: "One metric that matters", description: "Every project names its number up front." },
      ]}
    />
  );
}

Props

type ActionLink = { label: string; href: string };
type ImageItem = { src: string; alt: string };
type Principle = { title: string; description: string };

Behavior notes

• The left column uses lg:sticky lg:top-24 lg:self-start, so on desktop it stays pinned in the viewport while the (typically taller) principles list on the right scrolls past it; below lg both columns stack normally with no sticky behavior.
• Each principle's index is zero-padded with padStart(2, "0") (01, 02, ...) and rendered at a large tabular-numeral size in the primary color, not as a numbered <ol>.
• Principle titles change color on hover via group/about48 and group-hover/about48:text-primary, so hovering any part of the list item (not just the title text) triggers the highlight.
• Principle rows use border-t between items with first:border-t-0 first:pt-0, so the first principle has no leading divider while every subsequent one does.
• The image sits between the description and the button in the left column and is omitted entirely (no placeholder) if image is not passed.