# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/blog54. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-07-31

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Blog](/blocks/blog)
5. /
6. Pinned Lead Newsroom

# Pinned Lead Newsroom[PRO](/pricing)

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.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/blog54`

## 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 NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

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

**Base UI flavor**

bashCopy

```
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.

tsxCopy

```
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.

tsxCopy

```
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                        |

tsCopy

```
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](/blocks/blog)

[](/block/blog44)

PRO

blog44

### Newsroom Lead and Index

A newsroom listing with a heading, a divider, and an eyebrow over a hairline rule, a two-column lead story with a large image, the remaining stories stacked as numbered ruled rows with square thumbnails, and a seal button to the full archive.

[](/block/blog46)

PRO

blog46

### Front Page Columns

A newsroom front page with a heading, a divider, and a square eyebrow over a hairline rule, a wide lead story whose headline and standfirst split across a twelve column band under a panoramic image, and the remaining articles set as three bordered text cards.

[](/block/blog47)

PRO

blog47

### Bulletin Columns

A newsroom bulletin with a square eyebrow, an image-free lead story split across a 7/5 grid with a standfirst, byline, and a seal button, then three illustrated columns with hover-zoom images below a single hairline rule.

[](/block/blog52)

PRO

blog52

### Newsroom Masonry

A CSS-columns masonry of linked newsroom cards under a parenthetical eyebrow and a large heading, where the image aspect ratio cycles by position so the wall keeps an uneven, magazine-like rhythm.

[](/block/blog48)

PRO

blog48

### Quad Grid

A newsroom listing with a square eyebrow, a two-column heading band over a hairline rule, and four equally weighted stories as bordered cards, each linking through a hover-zoom image, a category kicker, a bold headline, a summary, and a byline pinned to the card foot.

[](/block/blog56)

PRO

blog56

### Category Mosaic

A six-slot photo mosaic under a parenthetical eyebrow and a large heading, where every tile is bound to one newsroom category so the grid doubles as a section map, with a ruled legend naming the sections above it.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.