Featured Article With Recent ListPRO

Blog60: Featured Article With Recent List

A blog section pairing one linked feature with a hover-zoom image, category label and byline against a hairline list of five recent posts stamped with their date.

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

Base UI flavor

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

This installs the block to components/beste/block/blog60.tsx plus the badge23 and button21 components it uses for the eyebrow and the archive link.

Quick start

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

import { Blog60, blog60Demo } from "@/components/beste/block/blog60";

export default function BlogPage() {
  return <Blog60 {...blog60Demo} />;
}

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

import { Blog60 } from "@/components/beste/block/blog60";

export default function BlogPage() {
  return (
    <Blog60
      badge={{ label: "Writing" }}
      heading="Notes from inside a working practice"
      button={{ label: "All articles", href: "/blog" }}
      featured={{
        category: "Migration",
        title: "What eleven years of records actually looks like when you export it",
        excerpt: "We opened one practice's full export and read every column.",
        author: "Priya Nandan",
        readingTime: "9 min read",
        href: "/blog/eleven-years",
        image: { src: "/blog/export.jpg", alt: "Paperwork and a calculator on a desk" },
      }}
      posts={[
        {
          date: "12 May",
          category: "Operations",
          title: "The waiting list is a scheduling problem, not a queue",
          href: "/blog/waiting-list",
        },
        {
          date: "28 Apr",
          category: "Billing",
          title: "Why we raise the invoice from the appointment, not the month",
          href: "/blog/invoicing",
        },
      ]}
    />
  );
}

Props

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

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

type ListedPost = {
  date: string;
  category: string;
  title: string;
  href: string;
};

Behavior notes

• Both the feature and each row are whole Link elements, so the entire card and the entire row are single targets. Everything inside is a span rather than a block element, which is what keeps that markup valid.
• Two named hover groups are in play, group/blog60 on the feature and group/blog60row on the rows, so the image zoom and the row arrow never trigger each other. Named groups also mean nesting this block inside another grouped component is safe.
• Both hover effects are wrapped in motion-safe:, so they are skipped for anyone who has asked their system to reduce motion.
• Rows use first:border-t-0 first:pt-0 and last:pb-0, so the list sits flush at both ends of its column and lines up with the top of the feature image beside it.
• The list column carries lg:pt-2 to compensate for the optical difference between an image edge and a text baseline.
• The header uses flex-wrap items-end justify-between, so the archive button sits on the heading's baseline on wide screens and drops below it when the heading needs the width.
• date and readingTime are plain strings, never parsed or formatted, so the block renders exactly what you pass and stays free of locale differences between server and client.