Press Room DigestPRO

Blog45: Press Room Digest

A newsroom listing section that splits its items into two treatments: a Badge6 eyebrow, bold heading, and intro sit above a hairline rule, the first item becomes a full-width lead story with a wide cover image, and every item after it becomes an image-free wire-feed row pairing a fixed date column with a release-type label, headline, dek, and a square arrow chip.

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

Base UI flavor

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

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

Quick start

The installed file exports blog45Demo alongside the block: the exact props behind the preview above. Spreading it gives a working press room in one line.

import { Blog45, blog45Demo } from "@/components/beste/block/blog45";

export default function Page() {
  return <Blog45 {...blog45Demo} />;
}

Written out by hand, a trimmed setup with real props looks like this:

import { Blog45 } from "@/components/beste/block/blog45";

export default function Page() {
  return (
    <Blog45
      label="Press room"
      heading="Statements, filings, and operational updates"
      description="Everything issued by the communications office, in the order it was released."
      items={[
        {
          image: { src: "/press/aragon-hall.jpg", alt: "A grid-scale battery storage hall" },
          kind: "Press release",
          category: "Operations",
          title: "Second grid-scale storage site opens in Aragon",
          summary: "The 320 MWh facility connects to the regional transmission network this quarter.",
          date: "Oct 14, 2026",
          author: { name: "Maria Santos", title: "Tech Lead" },
          href: "/press/aragon-storage",
        },
        {
          kind: "Annual report",
          category: "Sustainability",
          title: "Group emissions fall 18 percent ahead of the interim target",
          summary: "The eleventh sustainability report covers Scope 1, 2, and 3 emissions.",
          date: "Oct 2, 2026",
          author: { name: "Lisa Park", title: "Senior Developer" },
          href: "/press/emissions-report",
        },
      ]}
    />
  );
}

Props

type Article = {
  image?: ArticleImage;
  kind: string;
  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;
};

Behavior notes

• The split is positional, not a flag: items[0] renders as the lead article and items.slice(1) renders as feed rows. With a single item the feed disappears entirely, and with an empty array both the lead and the rows are skipped while the rule under the header still renders, so the section never loses its structure.
• The lead image is optional per item. When present it sits in an aspect-video clip that widens to md:aspect-[21/9] at md, and it scales to scale-105 on hover under a motion-safe: guard so the zoom is skipped for reduced-motion users. The lead headline shifts to text-primary on the same group hover.
• Feed rows are a three-track grid. Below md the tracks stack vertically (date, then the kind, title, and summary group, then the arrow chip); at md and up they become md:grid-cols-[9rem_1fr_auto], giving the date a fixed 9rem column and the arrow chip an auto column. Each row carries its own top hairline, so no rule is ever left hanging under an empty list.
• Not every field is displayed on every item. category is read only on the lead, where it prints as category · kind, while feed rows show kind alone. Only author.name reaches the DOM, in the lead byline By {name} · {date}; the optional title, avatar, and href fields on Author are part of the type but are not rendered, and feed rows carry no byline at all.
• Everything is static markup wrapped in Next.js Link components pointing at item.href, with no state, no click handler, and no callback prop. Rows are keyed by array index rather than by an id or href, so reordering items remounts them.