Two Image Layout

About32: Two Image Layout

A centered heading and description sit above two photos placed side by side in a single row, with a configurable width ratio between them (equal, left larger, or right larger). The row stays horizontal at every screen size, including mobile, rather than stacking the two images vertically.

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

Base UI flavor

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

This installs the block to components/beste/block/about32.tsx and its dependencies.

Quick start

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

import { About32, about32Demo } from "@/components/beste/block/about32";

export default function AboutPage() {
  return <About32 {...about32Demo} />;
}

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

import { About32 } from "@/components/beste/block/about32";

export default function AboutPage() {
  return (
    <About32
      heading="Our Story"
      description="We started in a single room above a bakery with three laptops and a whiteboard."
      images={[
        {
          id: "img-1",
          src: "https://images.unsplash.com/photo-1497366216548-37526070297c?w=1200&h=900&fit=crop",
          alt: "Modern office workspace",
        },
        {
          id: "img-2",
          src: "https://images.unsplash.com/photo-1556761175-b413da4baf72?w=1600&h=900&fit=crop",
          alt: "Team collaborating around a table",
        },
      ]}
      imageLayout="left-larger"
    />
  );
}

Props

type ImageItem = { id: string; src: string; alt: string };

Behavior notes

• Only the first two entries of images are ever rendered (images.slice(0, 2)); passing a third or fourth image has no visible effect.
• imageLayout maps to a fixed set of grid template columns: equal uses grid-cols-2, left-larger uses grid-cols-[2fr_1fr], and right-larger uses grid-cols-[1fr_2fr]. There is no ratio other than 2:1 in either direction.
• The image row is a plain CSS grid with no responsive breakpoint override, so it stays two columns side by side on mobile as well as desktop instead of stacking, unlike most image-pair patterns elsewhere in the set.
• Both images share a single aspect-[2/1] row height, so a taller or shorter source photo is always cropped via object-cover to fit that shared box, not its own independent aspect ratio.
• This block ships with registryDependencies: [], no shadcn/ui primitives and no badge/buttons props at all, making it the most minimal block in this set: just a heading, a description, and two images.