Studio Story Split

About63: Studio Story Split

Image-led about section split into a tall portrait photo with a caption on one side and an eyebrow badge, offset statement heading, supporting copy, a mono-style facts list, and a pill CTA on the other. Built for studio or agency "about" pages that want a quiet, editorial split rather than a stat-heavy hero.

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

Base UI flavor

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

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

Quick start

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

import { About63, about63Demo } from "@/components/beste/block/about63";

export default function AboutPage() {
  return <About63 {...about63Demo} />;
}

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

import { About63 } from "@/components/beste/block/about63";

export default function AboutPage() {
  return (
    <About63
      labels={{ caption: "The studio floor, midweek" }}
      badge={{ label: "Inside the studio" }}
      heading="A team shaped by the work it <strong>keeps</strong>."
      description="We would rather finish a handful of projects well than start a hundred."
      button={{ label: "Read our principles", href: "https://beste.co" }}
      image={{
        src: "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=1200&h=1500&fit=crop",
        alt: "Team reviewing printed layouts across a studio table",
      }}
      facts={[
        { label: "Founded", value: "2016" },
        { label: "Bench", value: "Six hands, one editor" },
      ]}
    />
  );
}

Props

type About63Labels = { caption?: string };
type Badge = { label: string };
type ActionButton = { label: string; href: string };
type About63Image = { src: string; alt: string };
type About63Fact = { label: string; value: string };

Behavior notes

• The heading's <strong> segments render in text-muted-foreground, not the primary color, keeping the emphasis quiet rather than loud.
• facts renders as a <dl> with a top border on the list and a bottom border on every row, so entries read as a divided ledger rather than cards; label sits left, value sits right and bold.
• The image caption (labels.caption) sits below the photo as plain muted text, not overlaid on the image.
• The CTA button is Button12: on hover its label slides out the bottom while a duplicate copy drops in from the top, and its trailing seal icon (defaults to ArrowUpRight) exits and re-enters the same way.
• Layout is a plain md:grid-cols-2 split; the image column never becomes sticky, so on tall pages it scrolls out of view with the text.