Lead Story With Thumbnail Rail

Blog65: Lead Story With Thumbnail Rail

A lead article carrying its own wide image, excerpt and byline next to a rail of further posts reduced to a thumbnail and a title, so one story clearly outranks the rest.

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

Base UI flavor

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

This installs the block to components/beste/block/blog65.tsx and the badge6 component it uses for the eyebrow (installed to components/beste/component/badge6.tsx).

Quick start

The installed file exports blog65Demo alongside the block: the exact props behind the preview above. Spread it to get a working front page in one line.

import { Blog65, blog65Demo } from "@/components/beste/block/blog65";

export default function WritingPage() {
  return <Blog65 {...blog65Demo} />;
}

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

import { Blog65 } from "@/components/beste/block/blog65";

export default function WritingPage() {
  return (
    <Blog65
      eyebrow="This week"
      bylinePrefix="by"
      featured={{
        image: { src: "/covers/process.jpg", alt: "A plan pinned above a desk" },
        title: "The process we fall back on when three projects overlap",
        excerpt: "Shipping is not the hard part. Two weeks of overlap is.",
        author: {
          name: "Alex Turner",
          title: "Studio lead",
          avatar: { src: "/people/alex.jpg", alt: "Alex Turner" },
        },
        href: "/essays/overlap",
      }}
      posts={[
        {
          image: { src: "/covers/tools.jpg", alt: "A laptop on a desk" },
          title: "The tools that survived a year on our machines",
          href: "/essays/tools",
        },
      ]}
    />
  );
}

Props

type FeaturedPost = {
  image: PostImage;
  title: string;
  excerpt: string;
  author: Author;
  href: string;
};

type SecondaryPost = {
  image: PostImage;
  title: string;
  href: string;
};

type Author = {
  name: string;
  title?: string;
  avatar?: PostImage;
};

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

Behavior notes

• The hierarchy is typographic, not decorative: the lead title runs to md:text-4xl while the rail titles stay at md:text-xl, so the ranking survives even with the images turned off.
• The split is lg:grid-cols-[1.1fr_0.9fr]. Below lg the rail drops under the lead and keeps its own order.
• The lead is one Link wrapping image, title, excerpt and byline, so nothing in it needs a second click target.
• The byline is composed from parts: bylinePrefix, the name in bold, then the author title after a comma when one is passed. Omitting the title leaves a clean name.
• Both the lead image and the rail thumbnails scale slightly on hover inside motion-safe, and the titles move to the accent colour through a shared group/blog65.
• The rail is a plain flex flex-col gap-8, so it takes as many posts as you pass rather than a fixed four.