Newsroom Lead and IndexPRO

Blog44: Newsroom Lead and Index

A blog listing section built on the Polaris section header: the heading, a vertical divider, and a Badge6 eyebrow share one row above a hairline rule. The first item becomes a two-column lead story with a large image, every remaining item stacks below it as a numbered ruled row with a square thumbnail on the right, and a Button1 seal button to the archive closes the 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/blog44?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/blog44.tsx and its dependencies, including the Badge6 and Button1 components it renders.

Quick start

The installed file exports blog44Demo alongside the block: the exact props behind the preview above. Spread it to get a working newsroom listing in one line.

import { Blog44, blog44Demo } from "@/components/beste/block/blog44";

export default function Page() {
  return <Blog44 {...blog44Demo} />;
}

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

import { Blog44 } from "@/components/beste/block/blog44";

export default function Page() {
  return (
    <Blog44
      label="Newsroom"
      heading="This week at Harbor Line"
      items={[
        {
          image: { src: "/press/terminal.jpg", alt: "Container cranes at the north terminal" },
          category: "Operations",
          title: "North terminal returns to full capacity after the refit",
          summary:
            "All six berths reopened on Monday, three weeks ahead of the published works schedule.",
          date: "3 April 2026",
          author: { name: "Maria Santos", title: "Operations Correspondent" },
          href: "/press/north-terminal",
        },
        {
          image: { src: "/press/results.jpg", alt: "Quarterly results on a meeting room screen" },
          category: "Markets",
          title: "First-quarter volumes rise 8 percent year on year",
          summary: "Service contracts carried most of the increase and full-year guidance holds.",
          date: "28 March 2026",
          author: { name: "David Chen" },
          href: "/press/q1-volumes",
        },
      ]}
      button={{ label: "All press releases", href: "/press" }}
    />
  );
}

Props

type Article = {
  image: ArticleImage;
  category: string;
  title: string;
  summary: string;
  date: string;
  author: Author;
  href: string;
};

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

type Author = {
  name: string;
  title?: string;
  avatar?: { src: string; alt: string };
  href?: string;
};

type ActionButton = {
  label: string;
  href: string;
};

Behavior notes

• The item count is not fixed. items[0] is rendered as the lead and items.slice(1) as rows, so a single item produces a lead with no row stack, and an empty array leaves only the header and the button.
• The header rule is structural and renders even when both heading and label are omitted, so the frame survives without either. The row stack is wrapped in a rows.length > 0 guard, and each row draws its own top rule, so no rule is ever left hanging on its own.
• The lead is a single stacked column below md and splits into a two-column image-and-text grid at md. Rows stay horizontal at every width, with the thumbnail growing from w-24 to md:w-36; the (01) counter is hidden below sm so narrow rows keep their full text width.
• Bylines run through a formatByline helper that prints By {name}, {title} · {date} when author.title is set and By {name} · {date} when it is not. author.avatar and author.href are accepted by the type but are not rendered anywhere.
• Both the lead and each row are a Next.js Link around the whole block of content, and rows are keyed by array index rather than href, so reordering items remounts rather than reorders them. Images scale to scale-105 and headlines shift to text-primary on group hover, with the zoom guarded by motion-safe:.