# 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/blog52. 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 Masonry

# Newsroom Masonry[PRO](/pricing)

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.

ViewCodeDocs

Base UI

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

## Blog52: Newsroom Masonry

A blog section that renders a balanced CSS-columns masonry of linked newsroom cards beneath a `Badge7` eyebrow and a large heading. The image aspect ratio cycles by position through a six-entry list, which gives the wall an uneven, magazine-like rhythm without the card heights depending on how long each headline runs.

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

**Base UI flavor**

bashCopy

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

This installs the block to `components/beste/block/blog52.tsx` and its dependencies, including the `Badge7` component it renders.

### Quick start

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

tsxCopy

```
import { Blog52, blog52Demo } from "@/components/beste/block/blog52";

export default function Page() {
  return <Blog52 {...blog52Demo} />;
}
```

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

tsxCopy

```
import { Blog52 } from "@/components/beste/block/blog52";

export default function Page() {
  return (
    <Blog52
      badge={{ label: "Newsroom" }}
      heading="Latest from the press office"
      description="Filings and operating updates, published as they clear review."
      items={[
        {
          image: { src: "/news/margin.jpg", alt: "A printed quarterly statement on a desk" },
          category: "Markets",
          title: "Record third-quarter operating margin",
          date: "Nov 12, 2026",
          author: { name: "David Chen", title: "Markets desk" },
          href: "/news/margin",
        },
        {
          image: { src: "/news/storage.jpg", alt: "Battery storage containers on a new site" },
          category: "Operations",
          title: "Second grid-scale storage site opens in Aragon",
          date: "Nov 08, 2026",
          author: {
            name: "Maria Santos",
            avatar: { src: "/team/maria.jpg", alt: "Maria Santos" },
          },
          href: "/news/aragon",
        },
        {
          image: { src: "/news/board.jpg", alt: "An empty board room before a committee session" },
          category: "Governance",
          title: "Board appoints a new chief operating officer",
          date: "Nov 04, 2026",
          author: { name: "Lisa Park", title: "Corporate affairs" },
          href: "/news/coo",
        },
      ]}
    />
  );
}
```

### Props

| Prop        | Type        | Default | Description                                                                  |
| ----------- | ----------- | ------- | ---------------------------------------------------------------------------- |
| badge       | Badge       | –       | Badge7 parenthetical eyebrow above the heading; omitted entirely when absent |
| heading     | string      | –       | Section heading                                                              |
| description | string      | –       | Muted supporting paragraph, capped at max-w-2xl                              |
| items       | Article\[\] | \[\]    | Cards rendered into the masonry, in order                                    |
| className   | string      | –       | Extra classes merged onto the outer <section>                                |

tsCopy

```
type Badge = {
  label: string;
};

type Article = {
  image: ArticleImage;
  category: string;
  title: 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 layout is `columns-1` on mobile, `sm:columns-2`, and `lg:columns-3`, with `[column-fill:_balance]` and `break-inside-avoid` on each card, so the browser balances column heights and no card is ever split across a column break. Any item count works; the card count drives column height rather than a fixed row structure.
* Image ratios cycle by position through `aspect-[4/5]`, `aspect-video`, `aspect-square`, `aspect-[4/5]`, `aspect-video`, and `aspect-[3/4]`, wrapping past six items. Because the ratio comes from the position rather than the photo, source images of any dimensions produce the same wall.
* The avatar box is rendered whether or not the author has an avatar, so bylines stay aligned down a column even when only some authors carry a portrait. `author.href` is not rendered as a nested link, since the whole card is already a single anchor.
* Every card is a Next.js `Link` wrapping the image, kicker, headline, and byline, with a visible `focus-visible` ring. There is no state, no timer, and no click handler.
* Covers carry no hover treatment: no zoom, no colour shift, and no overlay change.

## More Blog blocks

[View all Blog](/blocks/blog)

[](/block/blog53)

PRO

blog53

### Mixed Release Masonry

A press office masonry wall under a parenthetical eyebrow and a large heading, mixing photo cards with image-free release cards on soft muted surfaces, each release card closing on a read-through line with a corner arrow.

[](/block/blog12)

PRO

blog12

### Masonry Pinterest Grid

Pinterest-style masonry layout with varying content heights. CSS columns create organic flow with cards of different summary lengths.

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

[](/block/blog55)

PRO

blog55

### Press Release Wall

A three-column wall of image-free press release cards on soft muted surfaces under a parenthetical eyebrow and a large heading, each card pairing a release type and date with a headline, dek, byline, and a ruled category row.

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

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