Checklist Split

Feature283: Checklist Split

A checklist split: a portrait photograph drifting inside its frame on one side, and on the other a heading, an intro, six ticked benefits in two columns and a pill.

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

Base UI flavor

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

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

Quick start

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

import { Feature283, feature283Demo } from "@/components/beste/block/feature283";

export default function Page() {
  return <Feature283 {...feature283Demo} />;
}

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

import { Feature283 } from "@/components/beste/block/feature283";

export default function Page() {
  return (
    <Feature283
      eyebrow="Included with every plan"
      heading="The small things that make the hour hold."
      description="Whatever rhythm you choose, these come with it."
      benefits={[
        "A written note after every session",
        "The same practitioner, every time",
        "A pause button, no questions asked",
      ]}
      button={{ label: "See the plans", href: "/pricing", tone: "dark" }}
      image={{ src: "/rooms/ledge.jpg", alt: "A ceramic vessel and a folded cloth on a plaster ledge" }}
    />
  );
}

Props

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

Behavior notes

• Benefits are plain strings rather than objects, which is deliberate: this is a list of one-line promises, and giving each a title and a description would push it toward being a different block.
• The tick sits in a bordered size-6 circle with shrink-0 and a mt-1 nudge, so a benefit that wraps to two lines keeps its mark aligned with the first line rather than centred against the pair.
• Items enter with a 0.07s stagger, tighter than the card blocks in the set, because six short lines read as one list rather than as six things.
• The button waits until 0.7s, after the whole list has resolved, so it does not arrive in the middle of the ticks appearing.
• The two columns are vertically centred, so a short benefit list stays level with a tall portrait instead of riding at its top edge.
• The photograph drifts -10% to 10% against a 1.2 scale and clears from blur(24px) on decode, with a complete check on mount for cached files.
• Without image the copy column keeps its grid position rather than stretching to the full width.