Three Icon Columns

Feature281: Three Icon Columns

Three reasons in plain columns: a centred heading and intro, then circled icons above serif titles and paragraphs, with one pill centred underneath.

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

Base UI flavor

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

This installs the block to components/beste/block/feature281.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

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

import { Feature281, feature281Demo } from "@/components/beste/block/feature281";

export default function Page() {
  return <Feature281 {...feature281Demo} />;
}

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

import { Feature281 } from "@/components/beste/block/feature281";

export default function Page() {
  return (
    <Feature281
      eyebrow="Why people stay"
      heading="Three things we do differently."
      description="None of them is complicated. All of them are rare."
      button={{ label: "See the whole approach", href: "/approach", tone: "outline" }}
      columns={[
        { icon: Ear, title: "We listen to the end", description: "Sessions are never cut short for the next appointment." },
        { icon: Home, title: "It feels like a home", description: "Plaster walls, a low bench, a kettle." },
        { icon: Clock, title: "Nothing is rushed", description: "The pace is yours, and slowing down is allowed." },
      ]}
    />
  );
}

Props

type Column = {
  icon: LucideIcon;
  title: string;
  description: string;
};

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• icon takes the Lucide component itself rather than a name string, so icons are tree-shaken with the rest of your bundle and there is no icon map to maintain. Import what you need from lucide-react and pass it in.
• The heading and intro are centred while the columns are left aligned, which keeps a three-up row of paragraphs readable instead of ragged on both sides.
• Icons sit in a size-12 circle of bg-muted on the page surface, the inverse of the card-based sibling in this family where the circle is light on a muted panel.
• Columns enter with a 0.12s stagger by index, so the row resolves left to right rather than as one block.
• The grid is fixed at three columns from md and a single column below it; there is no two-up step, because these are three reasons rather than an arbitrary list.
• Column titles are h3 under the section h2, keeping the outline correct wherever the block sits.
• The button is the only interactive element; the columns are copy and carry no hover state.