Three Column Text Explainer

Feature334: Three Column Text Explainer

Three equal columns, each with an optional photo, a bold title and a long paragraph, for explaining related products or policies side by side, with an optional heading and intro above. The columns stack on small screens.

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://beste.dev/r/feature334?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://beste.dev/r-base/feature334?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/feature334.tsx. It uses no shadcn primitives.

Quick start

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

import { Feature334, feature334Demo } from "@/components/beste/block/feature334";

export default function Page() {
  return <Feature334 {...feature334Demo} />;
}

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

import { Feature334 } from "@/components/beste/block/feature334";

export default function Page() {
  return (
    <Feature334
      heading="Car insurance, explained"
      description="Three policies cover most drivers. Here is what each one does."
      items={[
        {
          image: { src: "/images/street.jpg", alt: "A city street at night" },
          title: "Liability insurance",
          description: "Covers the damage your car causes to other people, up to your policy limits.",
        },
        {
          title: "Comprehensive",
          description: "Pays for damage to your own car, including theft, fire and storms.",
        },
      ]}
    />
  );
}

Props

type TextColumn = {
  title: string;
  description: string;
  image?: { src: string; alt: string };
};

Behavior notes

• The header block only renders when heading or description is set, so the columns can open the section on their own.
• image is optional per column. When set it shows above the title at 4:3 with object-cover; columns without one start with the title.
• Images use next/image with fill and sizes of a third of the viewport from md, so the browser downloads a size that fits the column.
• The grid is one column on phones and three from md. With two items the third slot stays empty instead of stretching the others.
• Paragraphs are text-base with relaxed line height in the muted color, which keeps long copy readable without competing with the titles.