Ruled index of jobs on the left that swaps the panel beside it, where each selection brings its own photograph, explanation and two ruled outcome figures.
A ruled index of jobs on one side, and on the other the selected job's photograph, statement, story and results. Selecting an entry swaps the whole panel; the CTA lives under the index.
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.
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/usecase47?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/usecase47?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/usecase47.tsx plus the badge7 eyebrow and button12 pill button it uses.
The installed file exports usecase47Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.
import { Usecase47, usecase47Demo } from "@/components/beste/block/usecase47";
export default function Page() {
return <Usecase47 {...usecase47Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Usecase47 } from "@/components/beste/block/usecase47";
export default function Page() {
return (
<Usecase47
badge={{ label: "Pick a job" }}
heading="Same studio, four very different afternoons."
labels={{ indexTitle: "The jobs" }}
entries={[
{
label: "Launching something new",
title: "A name, a face and a shelf to stand on",
description: "Naming, packaging and the first run of photography, as one parcel.",
src: "/jobs/launch.jpg",
alt: "Unbranded paper packaging",
results: [
{ title: "Weeks to shelf", value: "14" },
{ title: "Ranges launched", value: "Eleven" },
],
},
{
label: "Fixing what exists",
title: "Keeping the good half, replacing the rest",
description: "An audit of what already works, then surgery rather than a rebuild.",
src: "/jobs/fix.jpg",
alt: "Type specimen sheets on a table",
results: [{ title: "Assets retained", value: "Two thirds" }],
},
]}
button={{ label: "Talk through your job", href: "/contact" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string } | – | Eyebrow label rendered as a Badge7 |
heading | string | – | Section heading above the two columns |
entries | UseCaseEntry[] | [] | Jobs in the index, first one selected on mount |
button | ActionButton | – | Outline Button12 under the index |
labels | Usecase47Labels | {} | Fixed strings that are not content: the index title |
className | string | – | Extra classes for the outer <section> |
type UseCaseEntry = {
label: string;
title: string;
description: string;
src: string;
alt: string;
results: CaseResult[];
};
type CaseResult = {
title: string;
value: string;
};
type ActionButton = {
label: string;
href: string;
};button elements with aria-pressed, each opening on a border-t rule, so the list reads as a ruled index rather than a stack of tabs.text-foreground against text-muted-foreground) with a transition, which keeps the index quiet while still making the current row obvious.md:grid-cols-[1fr_1.5fr]), so the photograph gets the room and the index stays a list.dl in two columns, each on its own rule, so a job with one result and a job with two both look deliberate.md the index stacks above the panel in source order, so a phone reads the list of jobs first and then the selected one.