Chaptered About

About50: Chaptered About

A sticky, pinned portrait on the left runs alongside a heading and a numbered, chaptered story on the right, each chapter labeled "Ch. 01", "Ch. 02" and so on, separated by top borders.

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

Base UI flavor

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

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

Quick start

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

import { About50, about50Demo } from "@/components/beste/block/about50";

export default function AboutPage() {
  return <About50 {...about50Demo} />;
}

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

import { About50 } from "@/components/beste/block/about50";

export default function AboutPage() {
  return (
    <About50
      label="The company"
      heading="We build products <strong>worth remembering</strong>."
      image={{
        src: "https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&h=1067&fit=crop",
        alt: "Team reviewing printed work on a long table",
      }}
      chapters={[
        {
          title: "We started with one stubborn belief",
          body: "Good design is never decoration. We left our old jobs to build something better.",
        },
        {
          title: "Strategy before a single pixel",
          body: "Every engagement opens with weeks of listening, to founders and to customers.",
        },
      ]}
      button={{ label: "Start a chapter with us", href: "https://beste.co" }}
    />
  );
}

Props

type ImageItem = { src: string; alt: string };
type Chapter = { title: string; body: string };
type ActionLink = { label: string; href: string };

Behavior notes

• The image column uses lg:sticky lg:top-24 lg:self-start on an aspect-[3/4] frame, so on desktop it stays pinned in view while the chapters column scrolls past it; below lg the two columns stack in source order with no sticky behavior.
• Each chapter's index is generated from its array position (padStart(2, "0")) and rendered as "Ch. 01", "Ch. 02", and so on; there is no id/number field on the Chapter type to override this numbering.
• Chapters are separated by a border-t with first:mt-0 first:border-t-0 first:pt-0, so the first chapter has no leading divider or top margin while every later one does.
• The CTA button sits after the full chapter list, not beside the heading, so it always reads as the section's closing action regardless of how many chapters are passed.