Interleaved About

About40: Interleaved About

Magazine-style about section built on a 12-column grid: copy is interleaved between two staggered, offset portrait images using explicit row/column placement and negative margins to make the images overlap the text band.

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

Base UI flavor

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

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

Quick start

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

import { About40, about40Demo } from "@/components/beste/block/about40";

export default function Page() {
  return <About40 {...about40Demo} />;
}

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

import { About40 } from "@/components/beste/block/about40";

export default function Page() {
  return (
    <About40
      label="Inside Polaris"
      heading="We build brands that <strong>refuse to blend in</strong>."
      description="Polaris is a fourteen-person studio working out of a converted print house."
      button={{ label: "Read the studio file", href: "https://beste.co" }}
      images={[
        { src: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=1000&h=1250&fit=crop", alt: "Studio table reviewing layouts" },
        { src: "https://images.unsplash.com/photo-1531482615713-2afd69097998?w=800&h=1067&fit=crop", alt: "Open studio workspace" },
      ]}
      stats={[
        { value: "14", label: "People, one floor, zero account managers." },
        { value: "19yr", label: "Of putting craft ahead of the brief." },
      ]}
    />
  );
}

Props

type ActionLink = { label: string; href: string };
type ImageItem = { src: string; alt: string };
type StatItem = { value: string; label: string };

Behavior notes

• Only the first two images entries are used, destructured as imageA and imageB; further entries are ignored, and if imageB is missing the layout still reserves its grid track as empty space.
• The four blocks (imageA, heading, copy+stats+CTA, imageB) sit on explicit grid rows and columns (md:row-start-1/md:row-start-2, md:col-start-7) instead of flowing in document order, and imageB is pulled up with md:-mt-20 so it overlaps the copy block above it.
• Hovering either image scales it slightly (group-hover/about40:scale-105) over a 500ms transition.
• stats render in a fixed 2-column grid regardless of stats.length, matching the two stats used in the demo.
• Button1's seal icon is overridden to ArrowUpRight instead of the component's default ArrowRight.