Situation Fit Columns

Usecase44: Situation Fit Columns

Qualifying section that describes the three situations your service actually suits. Each ruled column pairs the situation with a dotted list of tell-tale signals and a soft panel stating what changes afterwards, so readers can self-select before they write to you.

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

Base UI flavor

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

This installs the block to components/beste/block/usecase44.tsx plus the badge7 component it uses for the eyebrow.

Quick start

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

import { Usecase44, usecase44Demo } from "@/components/beste/block/usecase44";

export default function Page() {
  return <Usecase44 {...usecase44Demo} />;
}

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

import { Usecase44 } from "@/components/beste/block/usecase44";

export default function Page() {
  return (
    <Usecase44
      badge={{ label: "Who this is for" }}
      heading="Three situations we are genuinely good at."
      description="And a few we are not, which we will tell you about on the first call."
      personas={[
        {
          title: "The company that outgrew its first identity",
          situation: "Everything was designed in a weekend five years ago.",
          outcome: "A system that fits the company you became.",
          signals: ["Three versions of the logo in circulation", "New hires design from screenshots"],
        },
      ]}
      labels={{ outcomeTitle: "What changes" }}
    />
  );
}

Props

type Persona = {
  title: string;
  situation: string;
  outcome: string;
  signals: string[];
};

type Usecase44Labels = {
  outcomeTitle?: string;
};

Behavior notes

• The outcome panel carries mt-auto, so the soft blocks align across all three columns even when one signal list runs longer than the others.
• The gap above that panel comes from the signal list's own mb-10, not from a margin on the panel: mt-auto collapses to zero in the tallest column and on mobile, where nothing is left to distribute, so the spacing has to be owned by the list.
• Signals sit on border-t border-dotted rules, a lighter tier than the column rule, which stops a three-item list from reading as a second heading level.
• The outcome is the only tinted element in each column, which is what makes the eye land on the payoff rather than on the symptoms above it.
• title renders as h3 and is deliberately a full sentence rather than a persona noun, since describing the situation converts better than naming a segment.
• Below md the columns stack in source order, so the first situation stays the one a phone reader sees first: order the array by how common the situation is.