# 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/blog44. 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. Newsroom Lead and Index

# Newsroom Lead and Index[PRO](/pricing)

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.

ViewCodeDocs

Base UI

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

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

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

**Base UI flavor**

bashCopy

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

tsxCopy

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

tsxCopy

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

| Prop      | Type         | Default | Description                                                                      |
| --------- | ------------ | ------- | -------------------------------------------------------------------------------- |
| heading   | string       | –       | Section heading printed to the left of the divider                               |
| label     | string       | –       | Badge6 eyebrow printed to the right of the divider                               |
| items     | Article\[\]  | \[\]    | Articles for the section; the first becomes the lead, the rest become ruled rows |
| button    | ActionButton | –       | Button1 seal button centered below the rows; omitted entirely when absent        |
| className | string       | –       | Extra classes merged onto the outer <section>                                    |

tsCopy

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

## More Blog blocks

[View all Blog](/blocks/blog)

[](/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/blog54)

PRO

blog54

### Pinned Lead Newsroom

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.

[](/block/blog45)

PRO

blog45

### Press Room Digest

A press room listing with a square eyebrow, a bold heading and intro over a hairline rule, a wide lead release with a panoramic image, and the remaining releases stacked as ruled rows that pair a date column with a release type, headline, dek, and a square arrow chip.

[](/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/blog43)

PRO

blog43

### Editorial Article Grid

A blog listing with an eyebrow over a hairline rule, a two-column heading, and three linked article cards with a hover-zoom image, a category label, a title, an excerpt, and byline.

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