Grouped Link Columns

Feature302: Grouped Link Columns

Three columns of ruled links under their own small-caps headings, so a whole directory of pages sits in one section.

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

Base UI flavor

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

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

Quick start

The installed file exports feature302Demo alongside the block: the exact props behind the preview above. Spread it to get a working grouped Link Columns in one line.

import { Feature302, feature302Demo } from "@/components/beste/block/feature302";

export default function Page() {
  return <Feature302 {...feature302Demo} />;
}

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

import { Feature302 } from "@/components/beste/block/feature302";

export default function Page() {
  return (
    <Feature302
      eyebrow="Find your way in"
      heading="Everything, grouped the way people ask for it."
      description="Three ways through the same practice."
      button={ label: "Talk to someone first", href: "/contact", tone: "outline" }
      groups={[
        {
          title: "By what you are carrying",
          links: [
            { label: "Grief and loss", description: "Held for as long as it takes", href: "/grief" },
          ],
        },
      ]}
    />
  );
}

Props

type GroupLink = {
  label: string;
  description?: string;
  href: string;
};

type Group = {
  title: string;
  links: GroupLink[];
};

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

Behavior notes

• Every entry is its own Link with a hairline under it, so a group reads as a list of destinations rather than a paragraph with links in it.
• Only the group heading is small-caps; the entry labels stay in the serif at sentence case, which keeps one uppercase line per screen.
• The label fades to seventy percent on hover while the rule under it darkens, so the row answers without shifting its neighbours.
• description is optional per entry, so a group can mix bare labels with explained ones without the rows losing their rhythm.
• Groups stack to one column below md, keeping their headings so the grouping survives on a phone.
• Entry delay is per group rather than per link, so three columns arrive one after another instead of forty rows staggering.