Pinned Lead Newsroom shadcn/tailwind block

About this block

Pinned Lead NewsroomPRO

A twelve-column newsroom band under a parenthetical eyebrow, pairing one lead story carrying a pinned marker, a large image, and a byline block with a stack of four ruled secondary rows, closing on a pill button to the archive.

Blog54: Pinned Lead Newsroom

A twelve-column newsroom band under a Badge7 eyebrow, pairing one lead story that carries a pinned marker, a large image, a summary, and an author block with a stack of ruled secondary rows beside it. A Button12 pill button to the archive closes the section.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

Upgrade Now

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

bash

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

Base UI flavor

bash

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

This installs the block to components/beste/block/blog54.tsx and its dependencies, including the Badge7 and Button12 components it renders.

Quick start

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

tsx

import { Blog54, blog54Demo } from "@/components/beste/block/blog54";

export default function Page() {
  return <Blog54 {...blog54Demo} />;
}

Then replace the demo with your own props. The first item becomes the lead and everything after it fills the secondary stack, so pass the flagship announcement first.

tsx

import { Blog54 } from "@/components/beste/block/blog54";

export default function Page() {
  return (
    <Blog54
      badge={{ label: "Press office" }}
      heading="Northwind newsroom"
      description="Filings and operating updates, published as they clear review."
      labels={{ featured: "Featured" }}
      button={{ label: "All press releases", href: "/press" }}
      items={[
        {
          image: { src: "/press/aragon.jpg", alt: "Battery cabinets in a storage hall" },
          category: "Operations",
          title: "Aragon storage campus enters commercial operation",
          summary: "The 240 MWh facility begins dispatch two quarters ahead of schedule.",
          date: "March 4, 2026",
          author: { name: "Maria Santos", title: "Tech Lead" },
          href: "/press/aragon-storage",
        },
        {
          image: { src: "/press/q4.jpg", alt: "Quarterly figures on a screen" },
          category: "Markets",
          title: "Fourth-quarter revenue climbs 12 percent",
          summary: "Recurring service contracts pass half of group revenue.",
          date: "February 26, 2026",
          author: { name: "David Chen", title: "Backend Engineer" },
          href: "/press/q4-revenue",
        },
      ]}
    />
  );
}

Props

Prop	Type	Default	Description
`badge`	`Badge`	–	`Badge7` parenthetical eyebrow above the heading
`heading`	`string`	–	Section heading
`description`	`string`	–	Muted supporting paragraph under the heading
`items`	`Article[]`	`[]`	First entry becomes the lead; the rest fill the secondary stack
`button`	`ActionButton`	–	`Button12` pill button centered under the band; omitted entirely when absent
`labels`	`Blog54Labels`	`{}`	Copy for the pinned marker above the lead headline
`className`	`string`	–	Extra classes merged onto the outer `section` element

type Badge = {
  label: string;
};

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;
};

type Blog54Labels = {
  featured?: string;
};

Behavior notes

The split is positional: items[0] renders as the lead and items.slice(1) fills the secondary stack. A single item produces a lead with no stack beside it, and an empty array leaves only the header and the button.
The band is a single twelve-column grid, seven columns for the lead and five for the stack, with nothing left over. Below md the two halves stack in source order, lead first.
The pinned marker renders only when labels.featured is set. It pairs a Pin icon with the label and sits above the lead's category line, so the lead reads as deliberately placed rather than merely first.
Secondary rows are ruled with border-t and the first row drops both its rule and its top padding, so the stack opens flush with the lead image rather than under a stray hairline.
The lead renders author.avatar in a round frame beside the name and title; secondary rows print the author as plain text. author.href is never rendered as a nested link, since each row is already a single anchor.
Every row and the lead are Next.js Link anchors with visible focus rings. There is no state and no timer, and photos carry no hover treatment.

More Blog blocks

View all Blog

PRO

blog44

Newsroom Lead and Index

PRO

blog46

Front Page Columns

PRO

blog47

Northwind newsroom

Full-year revenue rises 12 percent as industrial orders recover

Board appoints Helena Vogt as chief financial officer

Aragon storage campus enters commercial operation

Scope 3 emissions fall 18 percent across the supplier network

Green bond of 600 million euro prices at the group's tightest spread