Linked Situation Rows

Usecase59: Linked Situation Rows

Five situations as ruled rows, each one a whole link with a square photograph pinned left and an arrow link at the right end.

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

Base UI flavor

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

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

Quick start

The installed file exports usecase59Demo alongside the block: the exact props behind the preview above. Spread it to get a working linked Situation Rows in one line.

import { Usecase59, usecase59Demo } from "@/components/beste/block/usecase59";

export default function Page() {
  return <Usecase59 {...usecase59Demo} />;
}

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

import { Usecase59 } from "@/components/beste/block/usecase59";

export default function Page() {
  return (
    <Usecase59
      eyebrow="If any of this sounds familiar"
      heading="Five years that bring people here."
      description="Not a diagnosis, and not a list you have to fit into."
      button={ label: "Book a first hour", href: "/book" }
      situations={[
        {
          title: "The work stopped meaning anything",
          description: "It has gone quiet inside, and nobody has noticed yet.",
          linkLabel: "Read this one",
          href: "/situations/work",
          image: { src: "/situations/work.jpg", alt: "A desk lamp left on in an empty room" },
        },
      ]}
    />
  );
}

Props

type Situation = {
  title: string;
  description: string;
  linkLabel?: string;
  href: string;
  image: Image;
};

type Image = { src: string; alt: string };

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

Behavior notes

• Each row is one Link laid out as a grid, so the photograph, the sentence and the arrow link all lead to the same page.
• The photograph sits in a fixed size-20 square inside the grid's 5rem track, so every row keeps the same left edge whatever the image ratio.
• Square thumbnails carry no parallax: at this size a drift would read as a wobble rather than depth, so they only blur in.
• Titles are set at display size while the paragraph stays at reading size, so a row scans as a sentence with an explanation under it.
• The row tints on hover rather than moving, which keeps five long rows steady under a travelling cursor.
• The grid collapses to a single column below md, where the photograph sits above the title.
• Photos clear from blur(24px) on decode, with a complete check for cached files.