Image & Text Split shadcn/tailwind block

About this block

Image & Text SplitPRO

Side-by-side layout with a tall image on the left and company story, inline stats, and CTAs on the right.

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.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

Upgrade Now

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

bash

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

Base UI flavor

bash

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.

tsx

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:

tsx

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

Prop	Type	Default	Description
`badge`	`{ label: string; variant?: "default" \| "secondary" \| "outline" }`	–	Small label above the heading
`heading`	`string`	–	Section heading
`description`	`string`	–	Lead paragraph directly under the heading
`body`	`string`	–	Secondary, smaller paragraph below the description
`image`	`{ src: string; alt: string }`	–	Portrait image filling the left column
`stats`	`StatItem[]`	`[]`	Inline stat pairs below the body copy
`buttons`	`ButtonItem[]`	`[]`	CTA row at the bottom
`className`	`string`	–	Extra classes for the outer `<section>`

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.

More About blocks

View all About

PRO

about23

Story, Image & Team Row

PRO

about21

Checklist & Image Split

PRO

about32

Image & Text Split

We craft digital products that matter