Linked Card Rail

Feature301: Linked Card Rail

A horizontal rail of linked cards that starts in line with the heading and bleeds off the right edge, moved by arrow buttons or a swipe.

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

Base UI flavor

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

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

Quick start

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

import { Feature301, feature301Demo } from "@/components/beste/block/feature301";

export default function Page() {
  return <Feature301 {...feature301Demo} />;
}

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

import { Feature301 } from "@/components/beste/block/feature301";

export default function Page() {
  return (
    <Feature301
      eyebrow="Everything we offer"
      heading="Push the rail. Every card is a page."
      button={ label: "Book a first hour", href: "/book" }
      labels={ previous: "Previous", next: "Next" }
      cards={[
        {
          title: "Individual therapy",
          description: "Weekly or fortnightly, with the same practitioner throughout.",
          meta: "60 or 75 minutes",
          href: "/therapy",
          image: { src: "/services/therapy.jpg", alt: "A low armchair by a window" },
        },
      ]}
    />
  );
}

Props

type Card = {
  title: string;
  description: string;
  meta?: string;
  href: string;
  image: Image;
};

type Labels = {
  previous?: string;
  next?: string;
};

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

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

Behavior notes

• The rail measures the header's left edge on mount and on resize, then applies it as paddingLeft and scrollPaddingLeft, so the first card lines up with the heading while the rest of the rail bleeds off the right edge of the page.
• That inset is measured rather than written as an arbitrary calc() class, because a Tailwind arbitrary value containing spaces is dropped silently.
• scrollPaddingLeft matters as much as the padding: without it a snap point would land the card under the page margin instead of in line with the heading.
• The arrows move the rail seventy percent of its own width, so a press advances roughly a screen whatever the viewport.
• Scrolling is smooth by default and instant under reduced motion, since the arrows are the only way to travel for anyone who cannot swipe.
• The scrollbar is hidden in both engines, and snap-x snap-mandatory keeps a card aligned to the left edge after every gesture.
• The pill sits beside the arrows from md and drops below the rail on a phone, where the header would otherwise carry three controls across.
• Each card is one Link and owns its own scroll listener, drifting -8% to 8% against a 1.18 scale, so the photographs do not move together as the rail passes.