Image & Text Split

About5: Image & Text Split

Classic split-screen about layout: a tall portrait image fills the left column while the right column stacks the intro copy, an extended body paragraph, freeform inline stats, and CTA buttons.

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

Base UI flavor

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

This installs the block to components/beste/block/about5.tsx, along with the shadcn/ui badge and button components it depends on.

Quick start

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

import { About5, about5Demo } from "@/components/beste/block/about5";

export default function AboutPage() {
  return <About5 {...about5Demo} />;
}

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

import { About5 } from "@/components/beste/block/about5";

export default function AboutPage() {
  return (
    <About5
      badge={{ label: "Who We Are", variant: "secondary" }}
      heading="We craft digital products that matter"
      description="Born from a belief that software should be beautiful, fast, and accessible."
      body="Our team brings together expertise in design systems, frontend engineering, and user research."
      image={{ src: "https://images.unsplash.com/photo-1531297484001-80022131f5a1?w=800&h=1000&fit=crop", alt: "Modern workspace" }}
      stats={[
        { title: "Years in Business", value: "6+" },
        { title: "Team Size", value: "45" },
      ]}
      buttons={[{ label: "Get in Touch", href: "https://beste.co" }]}
    />
  );
}

Props

type StatItem = { title: string; value: string };

type ButtonItem = {
  label: string;
  href?: string;
  variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
};

Behavior notes

• The image uses a fixed aspect-[4/5] crop with object-cover, so tall, portrait-oriented photos work best; wide landscape images get cropped top and bottom to fit.
• Stats are laid out with flex flex-wrap gap-8, not a grid, so the number of stats does not force a particular column count; they simply wrap onto a new line once a row runs out of space.
• body is a distinct prop from description: description renders at text-base md:text-lg, while body renders smaller and dimmer at text-sm, so it's meant as a secondary paragraph after the lead-in copy rather than a duplicate of it.
• The two-column layout only kicks in at the lg breakpoint; below that the image stacks above the text column.